: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
# selector-hover
Selectors Level 4
# hover-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:hover
<a> element support
Non-standard
All elements support
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
See implementation notes.

参见