Menü mit animierten Gif auf schweben

Question

Ich habe diesen HTML Code:

<ul id="menu"> 
    <li id="index1"> 
     <a href="#index1"><span class="link">index1</span></a> 
    </li> 
    ... 
</ul> 

und diesen CSS-Stil:

#menu > li#index1 a{ 
    background: url(img/menu_index_out.gif) no-repeat; 
} 
#menu li#index1{ 
    background: url(img/menu_index.png) no-repeat; 
} 
#menu > li#index1 a:hover{ 
    background: url(img/menu_index_in.gif) no-repeat; 
} 
... 
#menu .link{ 
    display:none; 
} 

aber die * in.gif und * .out.gif Animation richtig funktioniert nur, in Opera (11.61) Aber wenn ich es in Chrome (17.0.963) und in IE9 getestet habe, spielt die Animation nur einmal und dann verhalten sich die Links einfach wie Hover-Change ohne Animation.

Gibt es eine Möglichkeit, animierte GIF Hover-In-Hover-Out nur mit CSS (und HTML) zu erstellen, die auf den meisten Browsern funktioniert?

Answer 1

Ja. Sie könnten ein neues <img /> -Element in der Schaltfläche mit Javascript erstellen, wenn die Person die Schaltfläche bewegt und sie dann entfernt. Aber es ist kein guter Weg, es zu tun.