html - 悬停时闪烁的背景

我正在设置一张地图，当您将鼠标悬停在橙色小圆圈上时，会出现一条鱼。
可以在这里看到示例，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;

}

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

问候

最佳答案

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

您需要向a标签添加子元素，然后将背景图片应用于该元素。

尝试这个：

<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 */
}

关于html - 悬停时闪烁的背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13608357/