CSS :hover 选择器
下面有更多实例。
定义和用法
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示: :hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效!
| 版本: | CSS1 |
|---|
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 选择器 | |||||
|---|---|---|---|---|---|
| :hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
注释: 在IE中必须声明 <!DOCTYPE> 用于 :hover 选择器处理 <a> 元素以外的其他元素。
语法
更多实例
实例
当鼠标悬停在 <p>, <h1> 和 <a> 元素上时，选择并设置其样式:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
亲自试一试 »
background-color: yellow;
}
实例
选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
/* 未访问的链接 */
a:link {
color: green;
}
/* 访问过的链接 */
a:visited {
color: green;
}
/* 鼠标悬停的链接 */
a:hover {
color: red;
}
/* 选中的链接 */
a:active {
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%;
}
亲自试一试 »
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
实例
将鼠标悬停在 <span> 元素上以显示 <div> 元素（如工具提示）:
div {
display: none;
}
span:hover + div {
display: block;
}
亲自试一试 »
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;}
亲自试一试 »
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 伪类
