Question

basically I am using jquery cycle, and it has a wrapper for the numerical navigation to navigate the slideshows.

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

the css is :

#slide_nav a { 
  background: #d5d5d5; 
}

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

then i want to use jquery to change the background of the second and third navigation, since I’m aware that CSS nth selector will not work at all browsers (is it true? kinda forgot). so here’s my 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"});

so it’s a success, my 2nd n 3rd navigation change colors. However the problem is, the css a:hover rule doesn’t work, meaning if i hover the 2nd and 3rd navigation, it doesn’t change bg color to #272727 anymore, it stays on green and blue for 2nd and 3rd navigation, but it works for the first navigation which I left out of the jquery rule.

is there a way to use jquery to change the background of the a but leave the a:hover rule to css external stylesheet?

EDIT : I’m using Firefox 3.5

Answer 1

create a class instead of your jquery css. And changes in your style block will be like this:

#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;
}

And use this jquery:

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

PS the solutions wasn’t tested but it should work (may require some adjustments). The idea was to avoid jquery styling and replace it with classes.