Menu with animated gif on hover

Question

I have this html code:

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

and this css style:

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

but the *in.gif and *.out.gif animation works properly only in Opera (11.61) But when I tested it in Chrome (17.0.963) and in IE9, the animation plays only once and then the links behave simply like hover-change without animation.

Is there a way to create animated GIF hover in-hover out with only CSS (and HTML), that works on most browsers?

Answer 1

Yes. You could create a new <img /> -element inside the button with javascript when the person hovers the button and then remove it. But it is not a good way to do it.