懸停時閃爍的背景

Question

我正在設置一張地圖，當你懸停小橙色圓圈時，一條魚就會出現。 實例可以在這裏看到，http://www.simagine.nl/kaartje

但是，如果你懸停最右邊的圓圈，略高於澳大利亞，itselfs不斷閃爍的懸停和爲此的形象也不斷閃爍。

這樣做的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

該規則s在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

先給邊框你的鏈接，看到它太小而不能徘徊，因此增加了尺寸，看到紅色邊框我已經做的，我只是增加了高度和寬度你的鏈接像

height: 20px; 
width: 20px; 

，並正確地將其套在橙色圓圈在這樣一種方式，橙色的圓隨附的包裝盒的中心，比你是好去

Answer 3

當您懸停時，您將更改錨標記的樣式。我建議創建一個div設置爲'visibility：hidden'，然後在a.tonijn：hover將同一div設置爲'visibility：visible'