当我在 HTML/CSS 中单击映射到我的图像的热点时，如何删除蓝色边框？

Question

我在图像上创建了一个热点，当我点击图像的某个区域时，现在会出现一个蓝色框（在所有浏览器中）。我已经尝试了一切，包括添加：

#mapimage {
    margin: 0px; padding: 0px; text-align: center;border:0
}


#mapimage area {
    margin: 0px; padding: 0px; text-align: center;border:0
} 

#imagemap area {
outline:none;
}

a img { border: none; }

代码如下：

<img id="mapimage" src="http://intra.ontariocourts.on.ca/ocj/wp-content/uploads/2014/09/regionsofthecourt.jpg" alt="regionsofthecourt" usemap="#regions" width="480" height="468" /></div>

请帮忙！谢谢！

Answer 1

您还需要将 outline:none; 添加到 a img。

Answer 2

将 hidefocus=true 添加到您的 < img > 标签中

<img id=......................... hidefocus=true/>

还有你的css

img #imagemap, map area { outline:none;}

应该可以了。试一试。

Answer 3

在浏览了数十个论坛后，这对我有用。将下面的代码添加到您的 CSS:

a img { 
  border: none; 
}

area {
  outline: none;
}

当我在 HTML/CSS 中单击映射到我的图像的热点时，如何删除蓝色边框？

How do I remove the blue border when I click on a hotspot mapped to my image in HTML/CSS?

html

css

image

border