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-ный селектор не будет работать во всех браузерах (это правда? Вроде как забыл). так вот мой 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: hover не работает, то есть, если я наведу 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 и заменить их классами.