关闭边栏(ESC)打开边栏(ESC)
在文章页底部的上下篇文章导航中,有个这样的问题,点击的有效范围只在链接这个小范围上,而不在大的DIV框内,操作不是好方便,今晚改了一下,优点就是可以扩大到整个DIV框来点击,但缺点就是标题太长的时候,没有了省略号,不过这个还好问题不大吧。
一、原来的链接如下,需要添加的是一个父元素的相对定位,以便等会伪元素的位置可以有参考,这里不能用overflow:hidden:
1 |
#post-link>div a{position:relative;} |
二、添加一个伪元素,来用扩大点击的有效范围:
1 |
#post-link>div a:before{content:'';position:absolute;top:-30px;right:-20px;bottom:-20px;left:-20px;} |
如下图片为了演示清晰效果,在链接外加了个边框,鼠标经过有效区域的时候,链接框会显示淡红色。左边的DIV有效点击范围是整个框的,右边的只有链接这个小框可以点击:
这个总结的好,平时都忘记了