css中鼠标放上去变红色

在CSS中，我们常常需要为网页元素添加鼠标悬浮时的效果，比如当鼠标放上去时，文字或者按钮的颜色会变成红色。下面就来介绍一下如何使用CSS将鼠标放上去时的效果实现。

/*定义普通状态下的样式*/
p {
    color: black;
    font-size: 16px;
}

/*当鼠标放上去时的效果*/
p:hover {
    color: red;
}

在上面的代码中，我们首先定义了普通状态下的样式，然后使用:hover伪类选择器来选择鼠标放上去时的效果。 在:hover之后，我们可以编写任意需要的样式代码，比如改变背景颜色、字体大小、边框等等。 在本例中，我们将文字颜色定义为红色。

需要注意的是，不是所有的HTML元素都支持:hover效果，只有那些可以与鼠标交互的元素才能使用hover。比如，

<table>

、

<tr>

、

<td>

等元素并不支持hover效果。

在实际开发中，我们可以将hover效果与JavaScript事件一起使用，以实现更复杂的交互效果。比如，当鼠标放上去时弹出提示框、显示隐藏元素等。

总之，CSS中的:hover效果为我们提供了非常灵活的交互方式，只需要一些简单的代码就可以让页面更具吸引力和互动性。