html - 悬停时带有动画 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 中测试它时，动画只播放一次，然后链接的行为就像没有动画的悬停变化一样。

有没有一种方法可以仅使用 CSS(和 HTML)创建动画 GIF 悬停悬停，并且适用于大多数浏览器？

Answer 1

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