悬停时带有动画 gif 的菜单答案

【问题标题】：Menu with animated gif on hover悬停时带有动画 gif 的菜单
【发布时间】：2012-04-09 06:36:42
【问题描述】：

我有这个 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 悬停悬停在大多数浏览器上？

【问题讨论】：

提供图片，不然怎么会有人知道你到底在看什么...

标签： html css gif animated-gif

【解决方案1】：

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

【讨论】：