当前位置:园子博客 » 网站应用 » 如何去掉热点链接点击时的黑框或虚边

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

10月 10th, 2011 | Filed under 网站应用 | 共有9,833次浏览

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

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

方法一:

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

1
2
3
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 标签里面添加如下代码:

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

即可。

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

  1. 睿智
    12月 24th, 201113:59

    这个功能还没用过呢

  2. 长春时尚宾馆
    11月 30th, 201114:44

    这个方法真的很不错,收藏了

  3. 影楼网络营销
    11月 24th, 201109:38

    不错的方法学习一下了额

  4. 记忆盒子
    11月 22nd, 201116:27

    是的,不留黑圈更好看。我站的单选、多选、按钮都用了这个方法。:)

  5. 板凳
    11月 22nd, 201112:50

    感觉这个框对整体影响不大。

  6. 植物
    11月 21st, 201113:37

    懂代码就是不一样啊

  7. 站长工具
    11月 19th, 201103:13

    不错,又学了一招

  8. 这个黑框有点难看

  9. 法国梧桐
    11月 16th, 201114:12

    园子,最近怎么没有更新呢

  10. 除权买入
    11月 15th, 201113:10

    我试了下,果然去掉了

  11. 网架
    11月 14th, 201120:29

    看着很简单其实挺实用的

  12. 除权买入
    11月 14th, 201110:32

    这个我用了。效果不错

  13. 除权买入
    11月 13th, 201120:55

    不错,挺好的

  14. 旅行士吧
    11月 11th, 201113:55

    细节要注意啊!

  15. 网上药店
    11月 11th, 201109:50

    学习一下 来看看哦

  16. 狒狒
    11月 10th, 201116:47

    无意中进入你的站
    留个言给你啊

  17. 时尚女装品牌
    11月 9th, 201116:56

    之前还没注意过这一点呢。

  18. 淘友
    11月 9th, 201116:16

    呵呵,尝试一下.

  19. 洫之舞
    11月 6th, 201123:25

    对代码不是很了解,不过还真没注意这个!我把你加入博客展示里去了,独立博客大军中的活跃博主集中营,有时间去看看哈

  20. 学习博客
    11月 6th, 201116:49

    来学习了

  21. 什么是热点啊。。。。。

  22. 福州婚纱摄影
    11月 3rd, 201117:55

    这个很给力啊 要学下

  23. 内蒙古SEO
    11月 3rd, 201117:15

    这个没弄过。

  24. 仁心博客
    10月 28th, 201113:02

    我也学习一下啊

  25. 系统之家
    10月 26th, 201116:00

    呵呵!又学习了个小技巧啊

  26. 微卓
    10月 25th, 201121:53

    这个应该不会影响体验吧

  27. wigs cheap
    10月 25th, 201121:47

    喜欢的 哈哈

  28. 任鸟飞
    10月 25th, 201117:06

    好像IE浏览器会出这个问题,Chrome和firefox应该不会有这个现象吧。

  29. 美女套图
    10月 25th, 201109:59

    不错!学习

  30. 卢松松
    10月 24th, 201113:15

    那是你CSS的事吧,一般情况都没有

  31. yywr
    10月 23rd, 201113:53

    才记得还有园子这么一号人-_-!

  32. 防辐射眼镜
    10月 23rd, 201111:34

    这个不错,支持了呵呵

  33. 虚拟现实
    10月 23rd, 201110:23

    写的不错赶紧记下来

  34. wmtimes
    10月 20th, 201113:31

    这个还到真是没用过。

  35. 如何丰胸
    10月 19th, 201117:31

    之前还没注意过这一点呢。

  36. 笔记本电脑
    10月 19th, 201116:18

    不错。。下次一定试试!!

  37. 哈尔滨肝病医院
    10月 19th, 201115:57

    感觉很不错哦~~~哈哈!哪天试试呗!!

  38. 连衣裙
    10月 19th, 201110:20

    之前我也没有想到这个

  39. train quilt
    10月 18th, 201113:08

    写得不错,学习了!

  40. 工作室
    10月 17th, 201114:24

    不常用图片热点,不过这个细节可以记下来

  41. 金百临投资
    10月 17th, 201113:40

    终于找到了,谢谢博主啊,我就是这个问题,太感谢了

  42. 木本无心
    10月 12th, 201118:54

    你这个好,我是用的.htc文件。。

  43. 懒人
    10月 11th, 201122:44

    确实好看多了

  44. Louis Han
    10月 11th, 201122:09

    不同的浏览器还得单独考虑 标准不统一啊

  45. WordPress啦
    10月 11th, 201113:26

    这个黑框还真没有注意过,不过,这个确实需要注意的内容了

  46. 牛皮癣的症状
    10月 11th, 201111:00

    又学啦一招

  47. 法国梧桐
    10月 11th, 201110:16

    不错啊,小妙招

  48. 波尔山羊
    10月 11th, 201110:15

    又学会了一招嘿嘿

  49. 北京摄影
    10月 11th, 201109:11

    不错,感谢分享

  50. 黄色
    10月 10th, 201123:40

    新学了一招

  51. 阅微博客
    10月 10th, 201123:35

    之前还没注意过这一点呢。

  52. 信念一博
    10月 10th, 201116:32

    园子也是郑州人哦,看你好像用的郑州IDC机房, 不知道主机是在哪买的呢 ?

    • 园子
      10月 12th, 201109:12

      @信念一博
      空间商现在服务不怎么好 就不推荐了
      呵呵~

    • 土木坛子
      11月 14th, 201118:08

      好久没有更新了呢。原来园子是郑州人,我原来在郑州呆过。喜欢那里的烩面。

您必须在 登录 后才能发布评论.