How to add a:hover rule in js function?

I modified some jQuery slide gallery for my website. And I want to add .nav li a:hover{color:#00f;} in css, but it didn't work. I che开发者_C百科cked it in firebug, the css rule is be crossed off. I find something in the jquery slide galley's js file,like this:

function init(){
    g.find(".nav").children("li").css("margin","0").css("padding","5px"); 
    g.find(".nav").children("li").children("a").css("text-decoration","none").css("display","block");   
}

Is it should be add the a:hover css rule in the js files? How to add it? Thanks.

You can do this in JS with

g.find(".nav").children("li").children("a").hover(
    function() {
        $(this).css('color', '#00f');
    },
    function() {
        $(this).css('color', '#000');
    }
);

You could also modify the plugin stylesheet so you wouldn't have to override it.

It becomes a mess after a while, but you can give CSS directives precedence over subsequent directives using !important.

.nav li a:hover{ color:#00f !important; }

Since you mention the property being crossed off in firebug, I suspect this is your issue.