a:visited:hover高级用法

作者:     目录: PHP+MySQL     发表: 2010年05月19日

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高级应用

预览: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  ,就可实现如此别致的效果,还不赶快试一下!

标签:

2 个评论

  1. 任鸟飞说道:

    @视觉博客 嘿嘿 我觉得这样搭配挺好的,我也是模仿别人的。但实际点击效果并不好。

  2. 视觉博客说道:

    上面的Google广告很有创意,还有曲别针。

发表评论