css中鼠标经过变红

CSS是前端开发中不可或缺的一部分，其中鼠标经过效果更是常见的几种交互之一。这里给大家分享一种常用的方法：鼠标经过变红效果。

/* html 结构 */
<div class="red-hover">
  <p>鼠标经过此处</p>
  <p>就会变成红色哦！</p>
</div>

/* CSS */
.red-hover {
  background-color: white;
  padding: 20px;
  border: 1px solid red;
  transition: background-color 0.3s ease-in-out;
}
.red-hover p:hover {
  color: white;
  background-color: red;
}

如上代码，我们先给需要添加鼠标经过效果的元素加上一个 class 名称，这里是 red-hover。然后在 CSS 中设置该元素的样式，如背景色、内边距等。

接着，我们在 red-hover 元素内部的 p 标签上加上:hover伪类，这样当鼠标经过这段文本时就会触发伪类，并执行其中的样式规则，即改变文本背景为红色，文字颜色为白色。这里我们使用了 CSS3 的 transition 属性，让背景颜色变化更加平滑自然。

代码中使用的 pre 标签可以方便地显示代码格式。以上就是使用 CSS 实现鼠标经过变红效果的方法了！希望对大家有帮助。