0

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

}

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

问候

4

3 回答 3

2

当您悬停时，您正在更改锚标记的样式。我建议创建一个设置为“可见性：隐藏”的 div，然后在 a.tonijn:hover 上将相同的 div 设置为“可见性：可见”

于 2012-11-28T15:25:01.873 回答
2

中的规则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 */
}
于 2012-11-28T15:20:42.040 回答
1

尝试为您的链接添加边框，发现它太小而无法悬停，所以增加尺寸，看看我制作的红色边框，我只是增加了链接的高度和宽度，例如

height: 20px;
width: 20px;

并将其正确放置在您的橙色圆圈周围，使橙色圆圈位于框的中心，然后您就可以开始了

在此处输入图像描述

于 2012-11-28T15:23:51.603 回答