jQuery apply class underneath

Question

I have some css like so

#menu li
{
   color:#336633;
}
.hover
{
   color:#ffffff;
   background-color:#336633;
}

I am using jQuery's hover like so on hover: addClass('hover'); on out: removeClass('hover');

This changes the background color but not the font color. I suspect this is because the class is being applied first and then the default li behavior gets applied? Is there an easy way to make this work? I don't want to use a class for default li behavior, then remove it, apply hover and reapply default.

Thanks

Answer 1

What is the order in which these statements appear in your CSS? For the above code to work, .hover class MUST appear after the #menu li definition.

Alternatively, you can add !important to color property.

.hover
{
   color:#ffffff !important;
   background-color:#336633;
}

Answer 2

Your li selector is more specific than your class selector.

Try:

#menu li
{
   color:#336633;
}
#menu li.hover
{
   color:#ffffff;
   background-color:#336633;
}