如何去掉热点链接点击时的黑框或虚边

热点大多会用在给图片的局部添加链接时用到,今天园子发现给图片添加的一些矩形热点或多边形热点的时候,在用鼠标点击的时候会出现一个黑色的边框,这样在用户体验上非常不友好,如果你使用的是多边形热点,有个黑框看上去很别扭。本文园子与大家分享下如何去掉热点链接点击时的黑框或虚边,下面的方法经园子测试在IE、Firefox、Chrome 等浏览器下测试有效。

如何去掉热点链接点击时的黑框或虚边

方法一:

把以下 CSS 代码添加到页面中:

a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { -moz-outline-style: none; } /* for Firefox */
a { outline:none; } /* for FF Chrome */

这样即可实现去掉热点链接点击时的黑框或虚边,三种浏览器测试均显示正常。

热点链接点击时的黑框或虚边

热点链接点击时的黑框或虚边

方法二:

如果不想用 CSS 代码,可以在在每个 area 标签里面添加如下代码:

style="blr:expression(this.onFocus=this.blur())" 

即可。

园子建议使用方法一中的方法,一劳永逸。

如何去掉热点链接点击时的黑框或虚边》上有54条评论

发表评论