此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
:hover
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:hoverCSS伪类在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。
尝试一下
.joinBtn { width: 10em; height: 5ex; background-color: gold; border: 2px solid firebrick; border-radius: 10px; font-weight: bold; color: black; cursor: pointer;}.joinBtn:hover { background-color: bisque;}<p>Would you like to join our quest?</p><button>Confirm</button>: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 |