Hotspot在“鼠标向下”的左侧和右侧创建两条彩色线条

Question

我有一张我已经热点的文字图像，所以当我将鼠标悬停在某个特定的单词上时，它会改变图像以显示出现在该单词旁边的箭头的效果。

这很好但问题是在“鼠标按下”时，热点会在其自身的两侧添加两条线，如下所示：

热点创建的彩色线条与我网页上的链接颜色相同，所以我知道这是我的CSS创建问题，但我不确定如何。

CSS：

a:link {
    color: #C24B0C;
    text-decoration: underline;
}

a:visited {
    color: #C24B0C;
    text-decoration: underline;
}
a:hover {
    color: #C24B0C;
    text-decoration: none;
}
a:active {
    color: #fdbc2c;
    text-decoration: underline;
}

HTML：

<img src="images/toplinks.png" width="500" height="22" border="0" usemap="#Map" id="Image1" />

<map name="Map">
  <area shape="rect" coords="361,-6,458,25" href="contract.html" onMouseOver="MM_swapImage('Image1','','images/toplinks3.png',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="rect" coords="252,-7,338,23" href="quote.html" onMouseOver="MM_swapImage('Image1','','images/toplinks2.png',1)" onMouseOut="MM_swapImgRestore()">
</map>

ADDED FIDDLE ：如果将鼠标悬停在占位符图像上，您将找到该热点。单击并按住鼠标，您将看到错误

刚刚发现它也只发生在Chrome中。

Answer 1

使用outline; FIDDLE

area {
    outline : none !important;
}