Jquery动画效果
Jquery动画效果
提问于 2013-04-11 14:39:46
我的网站上有导航栏。以下是使用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);
});
})我想要的是，每当用户悬停在导航栏的任何项目，背景颜色应该动画与红色。但是，这也适用于当前项ie。当前类。我不希望当前类受到jquery的影响。
例如:当前页面是主页，然后用css当前类修改主页选项卡。当用户悬停在任何其他选项卡上时，即关于我们。背景应动画为红色color.but主页选项卡不应受影响。
请帮帮忙
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-11 14:44:00
试试这个。使用.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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15942235
复制相关文章
相似问题
腾讯云开发者
