0

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

在此处输入图像描述

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

在此处输入图像描述

热点创建的彩色线条与我网页上的链接颜色相同，所以我知道是我的 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 中。

4

1 回答 1

2

使用outline；小提琴

area {
    outline : none !important;
}
于 2013-09-06T10:53:19.157 回答