Question

好的，所以我的网站上有一个导航菜单，当我将鼠标悬停在菜单上的某个项目上时，我似乎无法使用此代码。我尝试了两个代码：

代码1：

$("#nav li").hover(function() {
  $(this).animate({backgroundColor: "#ffffff"}, 'slow');
});

代码2：

$(document).ready(function(){
  $("#nav li").hover(
   function() {
    $(this).stop().animate({backgroundColor: "#ffffff"}, "slow");
   },
   function() {
    $(this).stop().animate({backgroundColor: "#09c"}, "slow");
   });

 });

这是我的css，只是为了以下情况：

#nav {
margin-left:380px;
float:left;
width:650px;
margin-top:-47px;
}

#nav ul {
list-style-type:none;
}

#nav ul li {
float:left;
}

#nav ul li a {
text-align:center;
border-right:1px solid #fff;
display:block;
text-decoration:none;
color:#fff;
padding:20px;
}

#nav ul li ul {
display:none;
}

#nav ul li:hover ul {
display:block;
position:absolute;
background:#fff;
}

#nav ul li a:hover {
display:block;
background:#fff;
color:#09c;
}

BTW，我还将jQuery JavaScript Library v1.9.1包含在网站中（不确定这对你有用）

谢谢：）

Answer 1

请在下面的css代码中尝试更改导航菜单背景颜色

#nav ul li a:hover {
 background-color:#ffffff;
}

Answer 2

您需要包含jquery颜色插件才能为颜色设置动画。

此处：http://code.jquery.com/color/jquery.color-2.1.1.min.js

JQuery base lib确实不支持此功能。

注意比.css('backgroundColor','#333333')工作但不是等效的动画，所以你可以用css（）测试代码，然后在链接插件到页面之前用animation（）进行测试。

Answer 3

使用CSS3过渡来实现此效果，这将更方便。 http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

在悬停时动画导航背景颜色的问题

3 个答案: