:hover

The :hover CSS 伪类 匹配用户与元素的交互，但并不一定激活它。它通常在用户将鼠标悬停在元素上时触发（鼠标指针）。

试一试

由 :hover 伪类定义的样式将被任何后续链接相关的伪类（:link、:visited 或 :active）覆盖，这些伪类至少具有相同的特异性。为了适当地设置链接样式，请将 :hover 规则放在 :link 和 :visited 规则之后，但在 :active 规则之前，如 LVHA-order 中定义：:link — :visited — :hover — :active。

注意： :hover 伪类在触摸屏上存在问题。根据浏览器的不同，:hover 伪类可能永远不会匹配、只在触摸元素后的一瞬间匹配，或者在用户停止触摸后直到用户触摸另一个元素之前一直匹配。Web 开发人员应该确保内容在具有有限或没有悬停功能的设备上可以访问。

语法

css
:hover {
  /* ... */
}

示例

基本示例

HTML

html
<a href="#">Try hovering over this link.</a>

CSS

css
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}

结果

规范

规范
HTML 标准
# selector-hover
选择器级别 4
# the-hover-pseudo

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅