css stylesheet stronger than jquery addClass?

Question

Hey guys this thing drives me crazy. I defined in my stylesheet:

ul#menuCnt li a {
   color:"red";
}

If I want to make a hover effect, using jquery this won't change any color.

$("ul#menuCnt li a").hover(function() {
        $(this).addClass("brown");
    }, function() {
        $(this).removeClass("brown");
    });

I am really confused. If I don't define a color in my css stylesheet the hovereffect works.

Hope you can help me. You guys helped me so much by learning jquery and css :)

Thank you!

Answer 1

According to css priorities, if your class .brown is defined like this in your css file :

.brown{}

The rules inside will not override same rules in your # selector.

You can make it override them using the !important keyword.

.brown {
    color: brown !important;
}

Altough this is not the best solution here, it will work... The less you use !important, the more your code will be easy to read.

See http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.

Answer 2

Do you have a .brown selector in your CSS? Also an a tag might be a bad choice because it has a very good :hover selector build in.