html - 悬停时闪烁的背景

Question

我正在设置一张 map ，当您将鼠标悬停在橙色小圆圈上时，一条鱼就会出现。示例可以在这里看到，http://www.simagine.nl/kaartje

但是，如果您将鼠标悬停在最右边的圆圈上，略高于澳大利亚，悬停本身会一直闪烁，因此图像也会一直闪烁。

它的 CSS 是:

a.tonijn {
position:absolute;
text-indent:-9999px;
height:10px;
width:10px;
top:156px;
left:355px;
display:block;

a.tonijn:hover {
background:url(tonijn.png) no-repeat;
height:83px;
width:106px;
top:65px;
left:329px;

认为这是一个愚蠢的答案，但我找不到...

问候

Answer 1

a.tonijn:hover 中的规则更改了 a 元素的区域。

您需要向您的 a-tag 添加一个子元素，并将背景图像应用于该元素。

试试这个:

<a href="tonijn" class="tonijn">Tonijn<span></span></a>

/* Selector changed */
a.tonijn:hover span {
    background: url(tonijn.png) no-repeat;
    height: 83px;
    width: 106px;

    top: -83px; /* Value changed */
    left: -26px; /* Value changed */

    position: absolute; /* Attribute added */
    display: block; /* Attribute added */
}