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
伪类。