Question

基本上我使用的是jquery循环，并且它有一个数字导航包装器来导航幻灯片。

<div id="slide_nav">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>

css是：

#slide_nav a { 
  background: #d5d5d5; 
}

#slide_nav a.activeSlide,#slide_nav a:hover { 
  background: #272727; 
}

然后我想使用jquery来改变第二和第三个导航的背景，因为我知道CSS nth选择器不适用于所有浏览器（是真的吗？有点忘了）。所以这是我的jquery：

$('#slide_nav a:nth-child(2)').css({"background-color" : "green","color" : "#fff"});
$('#slide_nav a:nth-child(3)').css({"background-color" : "blue","color" : "#fff"});

所以这是成功的，我的第二个第三个导航改变颜色。但问题是，css a：悬停规则不起作用，这意味着如果我悬停第2和第3个导航，它不会将bg颜色更改为＃272727，它会保持绿色和蓝色以进行第2和第3次导航，但它适用于我从jquery规则中省略的第一个导航。

有没有办法使用jquery来改变a的背景但是将a：hover规则留给css外部样式表？

编辑：我正在使用Firefox 3.5

Answer 1

创建一个类而不是你的jquery css。您的样式块中的更改将如下所示：

#slide_nav a { 
  background: #d5d5d5; 
}

#slide_nav a.activeSlide,#slide_nav a:hover { 
  background: #272727 !important; 
}

a.child1{
 color: #fff
 background-color: green;
}

a.child2{
 color: #fff
 background-color: green;
}

并使用此jquery：

$('#slide_nav a:nth-child(2)').addClass(child1);
$('#slide_nav a:nth-child(3)').addClass(child2);

PS解决方案未经过测试但应该可以使用（可能需要一些调整）。我们的想法是避免使用jquery样式并将其替换为类。

jQuery css改变元素背景而不是元素：悬停背景

1 个答案: