CSS参考手册
选择 | Selectors
:hover
该:hover
CSS伪类匹配与用户的指示设备交互的元素(不一定激活)。通常当用户通过光标(鼠标指针)悬停在元素上时,会触发它。
/* Selects any <a> element, but only when "hovered"
/* (see above for more specific definiton) */
a:hover {
background-color: gold;
}
由:active
伪类定义的样式会被任何后续与该链接相关的, 至少具有相同特异性的伪类(:link
,:visited
或:active
)所覆盖。要给链接设置适当的样式,需要把:hover
规则放在:link
和:visited
规则前,但在:active
后,参考LVHA顺序::link
- :visited
- :hover
- :active
注意::hover
伪类在触摸屏上有重大问题。根据浏览器的不同,:hover
伪类可能永远不匹配,仅在触摸元素后匹配一段时间,或者甚至在用户停止触摸后持续匹配,直到用户触摸到另一个元素后才停止。网站开发人员应确保内容可以在悬停能力有限或不存在悬停能力的设备上正常访问。
语法
:hover
实例
例1:基本用法
HTML
<p><a href="#">This link will have a gold background when you hover over it.</a></p>
CSS
a:hover { background-color: gold; }
结果
示例2:具有全尺寸图像和图片预览的图库
您可以使用:hover
类的伪类,以构建一个只有当鼠标经过缩略图时才显示的全尺寸图像库。见这个演示可能的线索。
注意:对于一个类似的效果,但基于:checked
伪类(应用于隐藏的radioboxes),请参阅本演示,取自En / CSS /:checked页面。
规范
Specification |
Status |
Comment |
---|---|---|
HTML Living StandardThe definition of ':hover' in that specification. |
Living Standard |
|
Selectors Level 4The definition of ':hover' in that specification. |
Working Draft |
Can be applied to any pseudo-element. |
Selectors Level 3The definition of ':hover' in that specification. |
Recommendation |
No significant change. |
CSS Level 2 (Revision 1)The definition of ':hover' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
for <a> elements |
0.2 |
(Yes) |
1.0 (1.7 or earlier) |
4.0 |
4.0 |
2.0.4 (419) various bugs before |
for all elements |
0.2 |
(Yes) |
1.0 (1.7 or earlier) |
7.01 |
7.0 |
2.0.4 (419) various bugs before |
for pseudo-element |
? |
(Yes) |
28 (28) |
? |
? |
? |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
? |
(Yes) |
? |
? |
? |
?3 |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。