jQuery的CSS來更改元素背景，但不是元素：懸停背景

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第n選擇不會在所有的瀏覽器（這是真的嗎？有點忘記了）。所以這裏是我的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"}); 

所以這是成功的，我的第二n第三個導航改變顏色。然而，問題是，css a：hover規則不起作用，這意味着如果我懸停第二和第三個導航，它不會將bg顏色更改爲＃272727，它會保持綠色和藍色的第二和第三個導航，但它適用於我離開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樣式，並將其替換爲類。