:hover
该:hoverCSS伪类匹配与用户的指示设备交互的元素（不一定激活）。通常当用户通过光标（鼠标指针）悬停在元素上时，会触发它。
/* 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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
