菜单上有悬停的动画gif

Question

我有这个HTML代码：

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

和这个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;
}

但* in.gif和* .out.gif动画仅适用于Opera（11.61） 但是当我在Chrome（17.0.963）和IE9中测试它时，动画只播放一次，然后链接的行为就像没有动画的悬停变换一样。

有没有办法创建动画GIF悬停，只使用CSS（和HTML）进行悬停，适用于大多数浏览器？

Answer 1

是。当人们将按钮悬停然后将其删除时，您可以使用javascript在按钮内创建新的<img />元素。但这不是一个好方法。