:hover

: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页面。

规范

浏览器兼容性