CSS | :hover 选择器

CSS（层叠样式表）中的 :hover 选择器用于在用户使用鼠标悬停在一个HTML元素上时，改变该元素的样式。:hover 选择器可以用于超链接，按钮等元素上，提高用户体验。

使用方法

selector:hover { 
    property: value;
}

selector 可以是任何HTML元素，如 div, a, button 等。

property 可以是任何有效的CSS属性，如 color， background， font-size 等。

value 是属性的值。

以下是一个简单的例子，当鼠标悬停在一个链接上时，改变链接的颜色和字体大小：

a:hover {
    color: red;
    font-size: 16px;
}

注意事项

• :hover 选择器只能应用于那些可以接收鼠标事件的元素。
• :hover 选择器优先级较低，如果有其他CSS规则也指定了同样的属性，则可能会被覆盖。
• :hover 选择器只在用户使用鼠标时才有效，如果用户使用键盘进行导航，:hover将不会起作用。

结论

使用 :hover 选择器可以通过改变元素的样式，提高用户体验。它是CSS中非常有用的一个选择器。

参考文献

• CSS :hover Selector