CSS :hover 伪类

简介:

定义和用法
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

说明

这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上,其他元素也可以处于悬停状态,不过 CSS 没有定义究竟是哪些元素。

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS 的浏览器中以不同的方式显示出来:

a:link {color: #FF0000} / 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 当有鼠标悬停在链接上 /
a:active {color: #0000FF} / 被选择的链接 /
注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后!!

注释:为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!

注释:Pseudo-class(伪类)的名称对大小写不敏感。

注释:伪类可与 CSS 类配合使用:

a.red:visited {color: #FF0000;}

CSS Syntax
如果上面这个例子中的链接已访问过,那么它会显示为红色。

实例
规定链接的颜色:

a:link {color: #FF0000} / 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 当有鼠标悬停在链接上 /
a:active {color: #0000FF} / 被选择的链接 /
TIY (在页面底部可以找到更多实例)

浏览器支持
所有主流浏览器都支持 :hover 伪类。

TIY 实例
超链接
本例演示如何向文档中的超链接添加不同的颜色。
超链接 2
本例演示如何向超链接添加其他样式。
出自:http://www.w3school.com.cn/css/pr_pseudo_hover.asp

本文转自博客园知识天地的博客,原文链接:CSS :hover 伪类 需转载请自行联系原博主

相关文章
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
3月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
30 3
|
6月前
|
前端开发
CSS3常见伪类和伪元素及其使用方法
CSS3常见伪类和伪元素及其使用方法
58 0
|
6月前
|
前端开发 JavaScript
CSS伪类和伪元素
CSS伪类和伪元素
22 1
|
7月前
|
前端开发
CSS3 伪类选择器
CSS3 伪类选择器
23 0
|
3月前
|
前端开发
CSS3新增的has伪类选择器,让你能轻松选择父元素
CSS3新增的has伪类选择器,让你能轻松选择父元素
28 0
|
23天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
9 0
N..
|
1月前
|
前端开发 UED
CSS伪类和伪元素
CSS伪类和伪元素
N..
7 0
|
5月前
|
前端开发 JavaScript
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
css中什么是伪类?伪类,伪元素有哪些?区别是什么?
65 1
|
2月前
css3新增的伪类有哪些?
css3新增的伪类有哪些?