您的位置:首页 - 教程 - CSS - 正文
伪类link,hover,active,visited,focus的区别
CSS伪类用于向某些选择器添加特殊的效果。

:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。

查看实例效果:http://hovertree.com/texiao/css/11.htm

实例代码:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS伪类实例 - 何问起</title><base target="_blank" />
<meta charset="utf-8" />
<style>
.focushovertree a:link{
color: blue;
}
.focushovertree a:visited{
color: green;
}
.focushovertree a:hover{
color: red;
}
.focushovertree a:focus{
color:black;
}
.focushovertree a:active{
color: yellow;
}

.focushovertree input:focus{
background: yellow;
}

.focushovertree input:active{
background: red;
}
.hvtholder{width:789px;margin:0px auto;}
</style>
</head>
<body>
<div class="hvtholder">
点击以下链接和文本框查看效果,也可以试试Tab键<br /><br />
<div class="focushovertree">
<a href="http://hovertree.com/texiao/css/11.htm#urlhovertree" target="_self">本页锚点链接</a> <a href="http://hovertree.com/texiao/css/11.htm" target="_self">本页无锚点链接</a><br /><br />
<a href="javascript:;">点击我,永远未访问</a><br /><br />
<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/css/">CSS</a> <a href="http://hovertree.com/menu/html5/">HTML5</a>
<a href="http://tool.hovertree.com/info/ip/">查看IP</a>
<a href="http://hovertree.com/hvtart/bjae/v8e7w4u1.htm">原文</a>
<a href="http://hovertree.com/texiao/keleyi/">keleyi菜单</a>
<a href="http://hovertree.com/map/">导航</a>
<br /><br />
<input type="text" id="txthovertree" value="何问起" /><br /><br />
<input type="text" id="urlhovertree" value="先按下鼠标再放开hovertree.com" />
<br /><br />
链接:未访问 蓝色,访问过 绿色,光标悬停 红色,鼠标按下未放开 黄色, 鼠标按下后松开 黑色。
<br />文本框:鼠标按下 红色,松开 黄色。

</div>
</div>
<script>document.getElementById("txthovertr"+"ee").focus()</script>
</body>
</html>



例一:

/*css*/
a:link{
color: blue;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:focus{
color:black;
}
a:active{
color: yellow;
}

/*html*/
<p><a href="#">click me</a></p>

例二:

/*css*/
input:focus{
background: yellow;
}
input:active{
background: red;
}

/*html*/
<input type="text" id="txt">

link表示链接在正常情况下(即页面刚加载完成时)显示的颜色。

visited表示链接被点击后显示的颜色。

hover表示鼠标悬停时显示的颜色。

focus表示元素获得光标焦点时使用的颜色,主要用于文本框输入文字时使用(鼠标松开时显示的颜色)。

active表示当所指元素处于激活状态(鼠标在元素上按下还没有松开)时所显示的颜色。

注:伪类的顺序应为link--visited--hover--focus--active。





在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:focus {color: #000000} /*使用Tab键把聚焦落在链接上*/
a:active {color: #0000FF} /* 选定的链接 */

提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类名称对大小写不敏感。

评论: