htmlhover的属性,:hoverCSS属性参考
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 {
css鼠标点击样式
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伪类。
相关阅读

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。