:hover 选择器用于选择鼠标指针浮动在上面的元素. 当鼠标悬停在元素上时, 可使用此选择器设置元素的样式; 它可用于每个元素.
语法:
element :hover{
CSS 样式;
}
与 hover 相关的伪类:
● :hover 选择器可用于所有元素, 不仅是链接.
● :link 选择器设置了未访问过的页面链接样式,
● :visited 选择器设置访问过的页面链接的样式
● :active 选择器设置当你点击链接时的样式
说明: 为了产生预期的效果,:hover 必须位于 :link 和 :visited 之后 (如果存在的话), 这样样式才能生效.
示例 1: 在悬停在元素上时更改背景颜色.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- h1:hover { color: white; background-color: plum; }
- </style>
- </head>
- <body>
- <h1 align="center">
- 悬停文本
- </h1>
- </body>
- </HTML>
效果图:
示例 2: 在文本上悬停时显示隐藏的块
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- div {
- background: plum;
- width: 250px;
- height: 50px;
- padding: 20px;
- font-size: 30px;
- color: white;
- display: none;
- margin: auto;
- text-align: center;
- }
- h1:hover + div {
- display: block;
- }
- </style>
- </head>
- <body>
- <br />
- <h1 align="center"> 悬停文本 </h1>
- <div>
一段测试文本!
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/10426.html