在悬停的闪烁背景

Question

我正在设置一张地图，当你盘旋小橙圈时，会出现一条鱼。 这里可以看到示例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 */
}

Answer 2

当您悬停时，您正在更改锚标记的样式。我建议创建一个div设置为'visibility：hidden'然后在a.tonijn上：hover将相同的div设置为'visibility：visible'

Answer 3

尝试为链接添加边框并看到它太小而无法悬停，因此请增加尺寸，查看我制作的红色边框，我只是增加链接的高度和宽度，如

height: 20px;
width: 20px;

将它正确放置在橙色圆圈周围，使得橙色圆圈位于盒子的中央，而不是你好好去