文章归档友情连接照片地图

扩大文字a链接的可点击区域

分类:前端技术  作者:rming  时间:2011-03-06

通常在使用文本连接的时候,我们往往会在他的a:hover属性里设置一些诸如背景颜色的变化、文字颜色的变化,这样增加网页的动态效果,但是一般会存在文本连接范围小,这个可以通过Javascript加以改善,这里介绍css扩大文本连接可点击区域的设置方法。

比如我有如下代码

这里如果只是设置a:hover属性则会显示背景颜色的不完全变化。

这个时候,链接被设置为inline(内嵌),使得可点击区域过小。也就是说用户只有把鼠标移到文字上才能点击,这样明显降低了用户访问网站的效率。

但是我们需要做的更具可用性。每个链接肯定都会有一个父级元素,一般情况都是父级元素定义好了尺寸,而链接只是一个inline(内嵌)元素。所以,我们可以把链接的inline改成block(块),这样链接就会自动充满它的父级元素(一般情况下只是自动填充了宽度,如果高度需要填充满的话可以设置 height:100%;或者line-height)

如下效果:

即使鼠标不是指向文字区域的时候,依然会显示出变化效果,更加有利于访问者的点击。

这样显然会使链接更快速方便的点击,因为用户鼠标的目标区域要大得多!用户会得到更好的点击体验。每个链接节省一点时间,也许会让用户多浏览你的网站上的几个页面哦!
其实这个效果实现起来很简单,只要将链接样式的disply属性从inline改成block,另外也可以适当的添加填充,代码如下

.nav a{
 color:#88220b;
 display:block;
 line-height:22px;
}
.nav  a:hover{
 color:#FFF;
 background:#88220b;
}

如果你觉得在这个链接的区域内还有一些仅仅是静态文字形式的内容,比如发布日期或搜狐的这种链接描述。解决方法有两种:第一种是把他们就放在a标签内,然后为它们前后添加span标签,并取消hover样式。第二种是设置它们的z-index,并使用绝对或相对定位。其实,方法有很多,只要能让文字链接的点击区域扩大就可以了。



  1. ask me ask me

    感谢博主,学习了

提交评论