任鸟飞网站设计博客

a:visited:hover 高级应用通过设置a:link 、a:visited、 a:hover、 a:active ，可以明确标识某个链接的状态，从而提高用户体验。通常情况下设置好上述四个属性即可，但为了最大化实现页面的动态（a:hover）效果，这里讲一下a:hover的比较高级的用法。

一.  含义

• a:link —— 初始链接的样式
• a:visited —— 链接访问之后的样式
• a:hover —— 鼠标悬浮到链接时的样式
• a:active —— 按住链接的样式

二. 普通用法

通常情况下，按照上面的顺序，定义其样式即可。

三. a:visited:hover高级用法

a:visited:hover的含义——链接访问之后，鼠标再次悬浮到链接时的样式。 这样就可以对比链接点击前后样式的变化，进一步告诉用户，此链接已经被访问过。

四.  a:visited:hover 使用示例

预览：a:visited:hover 高级应用

HTML

<div id="page_nav">
 <span> Page 3 of 8 </span>
 <a href='#1'>First</a>
 <a href='#2'>2</a>
 <span class='current'>3</span>
 <a href='#4'>4</a>
 <a href='#5'>5</a>
 <a href='#6'>6</a>
</div>

CSS

#page_nav {
 font-weight: bold;
 font-family: Helvetica, Arial, Helvetica, sans-serif;
}
#page_nav a {
 background-color: #ebf2ff;
 border: 1px solid #ccdeff;
 line-height: 25px;
 padding-right: 8px;
 padding-left: 8px;
 height: 25px;
 display: inline-block;
 margin-right: 3px;
}
#page_nav a:visited {
 TEXT-DECORATION: none;
 color: #aaa;
 border: 1px solid #eee;
}
#page_nav a:hover {
 border: 1px solid #7AABFF;
}
#page_nav span.current {
 border: 1px solid #ccdeff;
 padding-right: 8px;
 padding-left: 8px;
 line-height: 25px;
 height: 25px;
 display: inline-block;
 margin-right: 3px;
}
#page_nav span.disabled {
 DISPLAY: none
}
#page_nav a:visited:hover  /* 设置 a:visited:hover*/ {
 border:1px solid #a9a9a9;
 color:#666;
}

五. 浏览器对 a:visited:hover  支持情况

在Chrome、IE8、Firefox、Opera下通过测试，其他的浏览器暂未测试。

六. 总结

只需要简单设置一下 a:visited:hover  ，就可实现如此别致的效果，还不赶快试一下！