Question

我的网站上有导航栏。以下是带css的代码

CSS

#navbar
{
width : auto;
height : 80px;
margin:15px 0px 0px 400px;
float:left;
}

#navbar ul
{
margin:0px;
padding:0px;
display:inline;
}

#navbar ul li
{
list-style:none;
float:left;
display:inline;

}

#navbar ul li a {
float:left;
display:inline;
font-family:arial;
font-size:16px;
font-weight:bold;
color:#505050;
margin: 20px 10px 0px 10px ;
padding : 5px;
width : 90px;
text-align:center;
border-radius:3px;
text-decoration:none;
}

#navbar ul li a:hover
{
background : #C84A30;
color:white;
}

#navbar ul li a.current {
background : #1D78B8;
color:white;
}

HTML

<div id="navbar">
<ul>
<li><a href="#" class="current">Home</a></li>   
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>    
<li><a href="#">Login</a></li>
</ul>
</div>

这是我正在使用的Jquery

$(document).ready(function(){
$("#navbar ul li a").hover(function() { 
$(this).animate({ backgroundColor: "#C84A30" }, 100); 
}, function() {
$(this).animate({ backgroundColor: "transparent" }, 300); 
});
})

我想要的是当用户悬停任何导航栏项目时，背景颜色应该用红色动画。但是，这也适用于当前项目即。当前的课程。我不希望当前的类应该受到jquery的影响。

例如：当前页面是Home Page，然后使用css current class修改home选项卡。当用户在任何其他选项卡上悬停时，即关于我们。背景应该设置为红色动画。但不应该忽略主页选项卡。

请帮忙

Answer 1

尝试使用.not()

$(document).ready(function(){
    $("#navbar ul li a").not(".current").hover(function() { 
         $(this).animate({ backgroundColor: "#C84A30" }, 100); 
    }, function() {
         $(this).animate({ backgroundColor: "transparent" }, 300); 
    });
})

link demo

Jquery动画效果

1 个答案: