Menu avec gif animé sur vol stationnaire

Question

J'ai ce code html:

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

et ce style css:

#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; 
} 

mais le * et * in.gif .out.gif animation fonctionne correctement seulement dans Opera (11.61) Mais quand je l'ai testé dans Chrome (17.0.963) et dans IE9, l'animation ne joue qu'une seule fois et les liens se comportent simplement comme un hover-change sans animation.

Existe-t-il un moyen de créer des survols GIF animés avec CSS uniquement (et HTML), qui fonctionne sur la plupart des navigateurs?

Answer 1

Oui. Vous pouvez créer un nouvel élément <img /> à l'intérieur du bouton avec javascript lorsque la personne passe le bouton, puis le supprimer. Mais ce n'est pas un bon moyen de le faire.