html hover的属性,:hover | CSS属性参考

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;

}

不仅是元素可以使用:hover伪类，其它的HTML元素也可以使用:hover伪类。例如下面的代码在鼠标滑过图片时将它放大2倍。

img:hover {

transform: scale(2);

}

在线演示

下面的例子在按钮的:hover和:active状态时为按钮设置的伪元素设置不同的样式。

浏览器支持

所有的现代浏览器都支持:hover伪类，包括：Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。

IE6及之前的IE浏览器仅支持在超链接元素上使用:hover伪类。

相关阅读