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 使用示例
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 ,就可实现如此别致的效果,还不赶快试一下!
@视觉博客 嘿嘿 我觉得这样搭配挺好的,我也是模仿别人的。但实际点击效果并不好。
上面的Google广告很有创意,还有曲别针。