悬停在 CSS 中时如何更改文本颜色

当我们要在网页中实现一个效果，即当鼠标悬停在目标元素上时改变文本颜色，我们可以使用 CSS 中的 hover 伪类选择器来实现此目的。

常规用法

hover 伪类选择器可以用于所有 CSS 属性，我们可以使用它来更改文本的颜色：

a:hover {
  color: red;
}

以上代码会在鼠标悬停在链接上时将文本颜色改为红色。

更多属性

当然，我们还可以使用 hover 伪类选择器来更改其他属性，比如背景颜色、字体大小等。

button:hover {
  background-color: blue;
  color: white;
  font-size: 18px;
}

以上代码会在鼠标悬停在按钮上时将按钮的背景颜色改为蓝色，文本颜色变为白色，字体大小变为 18 像素。

实现动画

我们也可以利用 hover 伪类选择器和 CSS 过渡属性（transition）来实现鼠标悬停时动画效果。

button {
  transition: background-color 0.3s, color 0.3s, font-size 0.3s;
}

button:hover {
  background-color: blue;
  color: white;
  font-size: 18px;
}

以上代码会在鼠标悬停在按钮上时将按钮的背景颜色、文本颜色和字体大小分别以 0.3 秒的过渡效果实现变化。

总结

通过使用 hover 伪类选择器，我们可以轻松实现鼠标悬停时的文本颜色、背景颜色等效果。同时，我们还可以结合 CSS 过渡属性来实现动画效果，为网页增添动感。