两句CSS属性让点击图片链接时的虚线框消失
昨天做一个导航条,为了节省代码,CSS属性使用了一个Line-height,结果每次点击导航,鼠标过后,惨不忍睹啊。一个扎眼的虚线框,他没包住图片,也没平均包住,虚线框错位很严重,其他一切正常。总之,本来很酷了,有这个虚线就一切白费。
在蓝色搜索啊搜索,看到了不少代码,不少代码还是很好用的,可就是有点太长了,有用纯CSS的(写了很长),也有用JS的(能用CSS的话我就不去用JS了)
最后,无意中看了一个属性。
结果是,两个CSS属性就一切OK了。
虽然没在蓝色找到我最想要的,不过这里的分享精神是在可敬,小弟不敢独享,特注册账号,就为今天这一贴,希望能对需要这个效果的人提供点帮助。
CSS 之
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline 属性是一个简写属性,用于设置元素周围的轮廓线。
注释:轮廓线不会占据空间,也不一定是矩形。
这就可以了,就给点击链接加这个属性 a:active{outline:none}
可惜,IE下无效 再加一个 a:active {blr:expression(this.onFocus=this.blur());}
没错,就是这样了
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
</style>
这样网页中的所有链接点击都没虚线框了(文字链接、图片链接==)
示例:
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
img,a .img{border:0}
</style>
<a href="#"> <img src="http://bbs.blueidea.com/images/default/newtopic.gif"></a><br>
<a href="#"> <img src="http://www.baidu.com/img/baidu_logo.gif"></a><br>
<a href="#">发新帖</a>
在蓝色搜索啊搜索,看到了不少代码,不少代码还是很好用的,可就是有点太长了,有用纯CSS的(写了很长),也有用JS的(能用CSS的话我就不去用JS了)
最后,无意中看了一个属性。
结果是,两个CSS属性就一切OK了。
虽然没在蓝色找到我最想要的,不过这里的分享精神是在可敬,小弟不敢独享,特注册账号,就为今天这一贴,希望能对需要这个效果的人提供点帮助。
CSS 之
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline 属性是一个简写属性,用于设置元素周围的轮廓线。
注释:轮廓线不会占据空间,也不一定是矩形。
这就可以了,就给点击链接加这个属性 a:active{outline:none}
可惜,IE下无效 再加一个 a:active {blr:expression(this.onFocus=this.blur());}
没错,就是这样了
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
</style>
这样网页中的所有链接点击都没虚线框了(文字链接、图片链接==)
示例:
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
img,a .img{border:0}
</style>
<a href="#"> <img src="http://bbs.blueidea.com/images/default/newtopic.gif"></a><br>
<a href="#"> <img src="http://www.baidu.com/img/baidu_logo.gif"></a><br>
<a href="#">发新帖</a>