Question

I am initially styling links(also different states) using css and then i am changing css properties for a tag using jquery css() function. The problem is- the css() function seems to effect not only a but also all it states.
That mean writing ‘a’ corresponds to all states of ‘a’. So we need to write something kind of a:link and change only ‘a:link’ not ‘a’.

How to write this using jquery.

Code what I am doing:
CSS:

#topics_nav a {
    color:#000; 
}
#topics_nav a:visited{
    color:#c00;
}
#topics_nav a:hover,a:active,a:focus{
    color:#FFF;
}

jquery:

$("document").ready(function(e) {
    $('#topics_nav a').css('color','#300');
});

This jQuery changes color of all states to #300.

I don’t want to change only the link state and don’t want to modify any other state. The following solution give a method to only affect hover(or any other) state but is there any other method instead of adding/deleting classes.

There is a solution to define some desired classes(classes like class1:hover) and instead of changing css we can change class.
But what about :link?

Answer 1

#topics_nav a {
    color:#000; 
}
#topics_nav a:visited{
    color:#c00;
}
#topics_nav a:hover,a:active,a:focus{
    color:#FFF;
}
.myclass:hover {
    color: #300;
}


$("document").ready(function() {
    $('#topics_nav a').addClass('myclass');
});

I think this is a better way to do it. Let CSS style the elements like this.