0

我有一个简单的水平菜单。我想要的只是我悬停在上面的 li a 的背景，以便从白色变为灰色。一切都在 Firefox 和 IE 中运行良好，但在 Chrome 中却不行。可能是什么原因？

代码：

<script type="text/javascript">
$(document).ready(function(){
    $("#nav ul li a").hover(function() {
        $(this).stop().animate({ backgroundColor: '#E5E5E5' }, 500);
    },function(){
          $(this).stop().animate({backgroundColor: '#FFF' }, 500);
     })
})
</script>

和 HTML：

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Estimator</a></li>
        <li><a href="#">Products & Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div><!--end of nav div-->

我知道这真的很简单，我以前做过很多次。但就像我说的，它在 Chrome 中不起作用。

固定的：

我刚换了插件。正如我所说，我已经有一段时间没有使用 jQuery 做过任何事情了。完全忘记了 jQuery UI。谢谢大家！

4

1 回答 1

3

我已经尝试过了（在这里），它在任何浏览器中都不适用于我。

这是预期的结果，因为 jQuery 不支持开箱即用的彩色动画。你必须使用 jQuery UI（这是巨大的）或像这样的插件

作为替代方案，您可以使用 CSS3 过渡 -演示

a {
    -webkit-transition: background-color .5s;
       -moz-transition: background-color .5s;
        -ms-transition: background-color .5s;
         -o-transition: background-color .5s;
            transition: background-color .5s;
}  

a:hover {
    background-color: #5f5f5f;
}
​
于 2012-11-10T21:54:46.363 回答