:hover

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:hover CSS 伪类在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。

尝试一下

:hover 伪类定义的样式将被任何后续的链接相关伪类（:link、:visited 或 :active）覆盖，这些伪类的特殊性至少相等。为了适当地为链接设置样式，应该在 :link和 :visited 规则之后，:active 规则之前放置 :hover 规则，即按照 LVHA 定义的顺序：link — :visited — :hover — :active。

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

语法

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

示例

基础示例

HTML

html
<a href="#">尝试将鼠标悬停到该元素上。</a>

CSS

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

a:hover {
  background-color: gold;
}

结果

规范

Specification
HTML Standard
# selector-hover
Selectors Level 4
# the-hover-pseudo

浏览器兼容性

BCD tables only load in the browser

参见