Please see my TEST PAGE
(which contains a deliberately truncated example of whats going on in my main working page)

I am having trouble getting the class added via addClass to trump the CSS already on that element
I have LI's styled via CSS, each with their own unique class.
Using jquery addClass, i'd like to swap those classes with a different class (mouseover)
But the only properties added are those not specifically called in the default class
For example, the text-decoration is the only thing added because thats the only part of the addClass class not trumped.
As a test, i strike the BG-color from one of the default classes, and it works: the BG-color from the addClass class displays.

I have tried moving the addClass class higher-up in the CSS stack, thinking sequence would make a difference, but no joy.

Any assistance is appreciated...

This has nothing to do with JavaScript. It is just because of the specificity of the CSS cascade. More specific rules will always take precedence. Sometimes when I have a class that gets added that is meant to trump other rules regardless, I will place the !important tag after the rule in the code block:

CSS

.hover {
    text-decoration:underline;
    color:#FF6600 !important;
    background-color:#CCCC00 !important;
}

Thanks for the response. I was on the fence whether this was a CSS issue or a jQuery syntax issue.

Your suggestion worked perfectly. I'd seen the !important declaration before, but never had a practical chance to use/see it in action.

thanks again...
seannarae