CSS :hover 伪类
下面还有更多“亲自试一试”的示例。
定义和用法
The :hover 伪类用于在您将鼠标悬停在元素上时选择这些元素。
提示：:hover 伪类可用于所有元素，而不仅仅是链接。
提示：使用 :link 为未访问过的页面链接设置样式，使用 :visited 为已访问过的页面链接设置样式，以及使用 :active 为活动链接设置样式。
注意：为了使 :hover 生效，它必须在 CSS 定义中位于 :link 和 :visited（如果存在）之后！
| 版本 | CSS1 |
|---|
浏览器支持
表中的数字指定了完全支持此伪类的第一个浏览器版本。
| 伪类 | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS 语法
更多示例
示例
鼠标悬停在 <p>、<h1> 和 <a> 元素上时选择并设置其样式
p:hover, h1:hover, a:hover {
background-color: yellow;
}
亲自试一试 »
示例
选择并设置未访问、已访问、悬停和活动链接的样式
/* 未访问链接 */
a:link {
color: green;
}
/* 已访问链接 */
a:visited {
color: green;
}
/* 鼠标悬停在链接上 */
a:hover {
color: red;
}
/* 选定的链接 */
a:active {
color: yellow;
}
亲自试一试 »
示例
使用不同的样式设置链接样式
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
亲自试一试 »
示例
将鼠标悬停在 <span> 元素上以显示 <div> 元素（如工具提示）
div {
display: none;
}
span:hover + div {
display: block;
}
亲自试一试 »
示例
在鼠标悬停时显示和隐藏“下拉”菜单
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
亲自试一试 »
相关页面
CSS 教程：CSS 链接
CSS 教程：CSS 伪类
