Rollover Bild zappelt

[gaplex]

Hallo,
der Hover-Effekt für eine Grafik in der Navigation soll sein, dass sich diese um 30 Pixel nach rechts verschiebt. Das funktioniert soweit gut, doch wenn man sich in diesem 30 Pixel bereich befindet, läd FF und auch IE den Hover-Effekt ständig nach und die Navigation beginnt zu "zappeln".

HTML:

<div id="navileft">
        <a class="nava" href="#"></a><br />
        <a class="navb" href="#"></a><br />
        <a class="navc" href="#"></a>    
        </div>

CSS:

a.nava, a.nava:hover, a.nava:active {
    background-image: url(img/nav1.png);
    background-repeat: no-repeat; 
    width: 245px;
    height: 45px;
    float: left;
}

a.nava:hover, a.nava:active {
    margin-left: 30px;
}

Was kann ich tun um das zu verhindern? Danke schon mal!

 

[ky_fr34k]

des ist ja auch so richtig!

du verschiebst das bild unterhalb der maus weg.
dadurch ist die maus nicht mehr auf dem bild und :hover ist nicht mehr gültig.
dadurch rutsch das bild wieder nach links.
dann ist die maus wieder auf dem bild und es rutsch nacht rechts
usw...
ich glaube was du sucht, ist

background-position: 0px 30px;

Gruß KY

P.S.: schreib doch statt

<div id="navileft">
        <a class="nava" href="#"></a><br />
        <a class="navb" href="#"></a><br />
        <a class="navc" href="#"></a>    
        </div>

lieber

<ul id="navileft">
        <li><a class="nava" href="#"></a></li>
        <li><a class="navb" href="#"></a></li>
        <li><a class="navc" href="#"></a></li>    
</ul>

Das ist richtig (semantik) und efchen kann sich eine predigt sparen ;)

 

[gaplex]

Ja genau so ist es super. Allerdings musste ich die Werte umdrehen:

background-position: 30px 0px;
Sonst wurde die Grafik nach unten verschoben statt nach rechts. Was mich wundert, ich dachte bei dieser Art von Angabe geht es immer von Oben im Uhrzeigersinn!?
Also Ob. Re. Un. Li.

Naja es funktioniert aber nun endlich ohne die Zappellei.
Und danke auch für den anderen Hinweis, ich muss mir das endlich mal angewöhnen mehr mit den Listentags zu arbeiten.
Danke!

 

[ky_fr34k]

Und danke auch für den anderen Hinweis, ich muss mir das endlich mal angewöhnen mehr mit den Listentags zu arbeiten.
Danke!

Möp. Falsch.
nicht mehr listen sondern sinnvolle!
Gruß KY

 

[Efchen]

ich muss mir das endlich mal angewöhnen mehr mit den Listentags zu arbeiten.

Eigentlich sollte man keinem HTML-Tag eine besondere Bedeutung beimessen.
Man sollte sich vielmehr angewöhnen, HTML zu verstehen und richtig zu benutzen.