共计 824 个字符，预计需要花费 3 分钟才能阅读完成。
CSS :hover伪类用于匹配用户使用鼠标指针滑过的元素。
绝大部分的移动触摸设备都不支持鼠标的滑过（hover）交互，因此在移动设备中使用 :hover 伪类是没有效果的。
:hover伪类是当一个元素被用户使用鼠标滑过时动态添加到元素上的类。它通常用于为鼠标滑过状态的元素设置样式。
当你使用 CSS 来定义超链接的样式的时候，要注意它们的书写顺序。正确的书写顺序是：:link—:visited—:hover—:active。抽取第一个字母是“LVHA”，你可以把它记忆为“LoVe HAte”（喜欢讨厌）。
a:link {/* style links */}
a:visited {/* style visited link */}
a:hover {/* hover styles */}
a:active {/* active state styles */}示例代码
下面的代码为页面中的超链接元素设置鼠标滑过时的样式。
a:link {
color: skyblue;
background-color: white;
}
a:hover {
background-color: skyblue;
color: white;
}不仅是 <a> 元素可以使用 :hover 伪类，其它的 HTML 元素也可以使用 :hover 伪类。例如下面的代码在鼠标滑过图片时将它放大 2 倍。
img:hover {transform: scale(2);
}在线演示
下面的例子在按钮的 :hover 和:active状态时为按钮设置的伪元素设置不同的样式。
浏览器支持
所有的现代浏览器都支持 :hover 伪类，包括：Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。
IE6 及之前的 IE 浏览器仅支持在超链接 <a> 元素上使用 :hover 伪类。
相关阅读
正文完