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

Problems Animating background color of navigation on hover

本文关键字：颜色 动画 背景 导航 悬停      更新时间：2023-09-26

好的，所以我的网站上有一个导航菜单，我似乎不能得到这个代码的工作，当我悬停在菜单上的一个项目。我尝试了两个代码:

代码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;
}

顺便说一句，我还包括jQuery JavaScript库v1.9.1到网站(不确定这是否会对你有用)

谢谢:)

请尝试使用下面的CSS代码更改导航菜单的背景颜色

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

你需要包含jquery颜色插件来动画颜色

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

实际上，JQuery基库不支持此特性。

注意，.css('backgroundColor','#333333')工作，但不是等效的动画，所以你可以先用css()测试你的代码，然后再尝试用animation()链接到你的页面。

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

相关文章：