: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.
Please take two minutes to fill out our short survey.
尝试一下
.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 class="joinBtn">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 |