0

ホットスポットしたテキストの画像があるので、マウスを特定の単語の上に置くと、画像が変わり、単語の横に矢印が表示されます。

ここに画像の説明を入力

これは問題なく動作しますが、問題は、「マウスダウン」時にホットスポットが次のように両側に 2 行追加されることです。

ここに画像の説明を入力

ホットスポットによって作成されている色付きの線は、Web ページのリンクと同じ色であるため、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>

フィドルの追加 : プレースホルダー画像にカーソルを合わせると、ホットスポットが表示されます。マウスをクリックして押したままにすると、エラーが表示されます

Chromeでものみ発生することがわかりました。

4

1 に答える 1

2

使用しoutlineます。フィドル

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