CSS Hover 选择器

CSS Hover 选择器用于当鼠标指针悬停在元素上时更改样式。它是CSS中非常常用的选择器之一，可以为网页或应用程序增加交互性。

语法

hover 选择器匹配鼠标悬停的元素。

selector:hover {
  /* 样式 */
}

示例

以下示例展示了如何使用 CSS Hover 选择器更改链接的样式，使其在鼠标悬停在链接上时出现下划线并改变颜色。

a:hover {
  text-decoration: underline;
  color: #ff0000;
}

可用属性

下面是一些可用的 CSS 属性，您可以在鼠标悬停时更改样式：

• background-color: 更改元素背景颜色。
• color: 更改元素前景颜色。
• border-color: 更改边框颜色。
• cursor: 更改鼠标指针形状，在鼠标悬浮时呈现新形状。
• opacity: 更改元素透明度。
• text-decoration: 添加或删除文本装饰，如下划线或删除线。
• transform: 应用2D或3D转换效果。
• transition: 指定属性何时过渡到新值的持续时间和函数。

/* 例如 */
div:hover {
  background-color: #f2f2f2;
  border-color: #dd0;
  color: #333;
  cursor: pointer;
  opacity: 0.6;
  text-decoration: underline;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

总结

CSS Hover 选择器是非常有用的，它可以帮助您为网页或应用程序增加交互性。你可以使用该选择器来更改元素背景，前景，边框颜色等以及所有其他属性。只需谨慎选择颜色或其他设置，并记得保持性能良好。