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 回答