Jquery动画效果

我的网站上有导航栏。下面是使用css的代码

CSS

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的影响

例如： 当前页面是主页，然后使用css当前类修改主页选项卡。 当用户将鼠标悬停在任何其他选项卡上（例如关于我们）时。背景应设置为红色。但不应设置“主页”选项卡

---

请帮忙试试这个。。。使用

.not（）

---

试试这个。。。使用

.not（）

---

它似乎在工作--有什么问题吗？它在工作，问题是我不希望jquery在css中的“当前”类上工作。如果主页是当前页面，那么jquery不应该在主页选项卡上工作，@Reigel的答案应该工作它似乎在工作--有什么问题吗？它在工作，问题是我不希望jquery在css中的“当前”类上工作。如果主页是当前页面，那么jquery不应该在主页选项卡上工作，@Reigel的回答应该是我拥有的更多东西，当页面加载时，以及当我第一次悬停在jquery不工作的元素上时。它只有在我打开元素时才开始工作。请帮忙it@NiravChheda我不知道为什么。。。演示程序按预期工作。。。也许js文件加载慢了……关于预加载jquery文件的其他想法还有一件事，当页面加载时，以及当我第一次悬停在jquery不工作的元素上时。它只有在我打开元素时才开始工作。请帮忙it@NiravChheda我不知道为什么。。。演示程序按预期工作。。。也许js文件加载速度慢了…还有其他关于预加载jquery文件的想法吗

<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> 

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

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