Question

请帮助解决问题。

html：

<img class="logo_pic img-responsive" src="images/logo.png" alt="logo" usemap="#link_index" />

<map name="link_index">
    <area shape="rect" coords="1,1,400,480" href="index.html" alt="" />
</map>

问题是当你点击图像时图像中出现蓝色边框。它们会在一秒钟后消失，但我需要让它不显示

http://jsfiddle.net/Ub886/1/

谷歌浏览器最新版本

Answer 1

您看到的蓝色边框实际上是处于“活动”状态的超链接。您可以添加css定义来设置这些边框的样式：

area:focus{
  border: none;
  outline-style: none; 
  -moz-outline-style:none;  
}

Fiddle as example

Answer 2

尝试：

<img class="logo_pic img-responsive" src="images/logo.png" alt="logo" usemap="#link_index" style="border:0"/>

您也可以在CSS样式表上执行此操作

.logo_pic img-responsive {
    border:0;
}

.logo_pic img-responsive:hover {
    border:0;
}

修改

img:active, :focus { outline: none; -moz-outline-style: none; }

<强>的jsfiddle：

http://jsfiddle.net/Ub886/4/

Answer 3

内联CSS ...

<img class="logo_pic img-responsive" src="images/logo.png" alt="logo" style="border:0;" usemap="#link_index" />

<map name="link_index">
    <area shape="rect" coords="1,1,400,480" href="index.html" alt="" />
</map>

如何删除边框？

3 个答案: