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

のルールはa.tonijn:hover、要素の領域を変更し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 */
}
于 2012-11-28T15:20:42.040 に答える
2

ホバーすると、アンカータグのスタイルが変更されます。'visibility：hidden'に設定されたdivを作成し、a.tonijn：hoverで同じdivを'visibility：visible'に設定することをお勧めします

于 2012-11-28T15:25:01.873 に答える
1

リンクに境界線を付けてみて、ホバーするには小さすぎることを確認してください。サイズを大きくして、作成した赤い境界線を確認してください。リンクの高さと幅を次のように増やしました。

height: 20px;
width: 20px;

そして、オレンジ色の円がボックスの中央に来るように、オレンジ色の円の周りに正しく配置します。

ここに画像の説明を入力してください

于 2012-11-28T15:23:51.603 に答える