CSS and Jquery: addClass not overwriting css

Question

I have a script that adds a class to an element on hover.

Issue is the new, added class does not seem to 'overwrite' the existing css (even though on my style sheet the added class is listed below the existing css).

I cannot use removeClass on the element as there is no actual initial class styling the element.

The 'initial' styling that needs to be overwritten is:

#menu ul li ul li {
background-color: #ccc;
}

The class that needs to be added is:

.whitebg {
background-color: #fff;
}

My script is:

$('#menu ul li ul li').hover(
function() {
    $(this).addClass('whitebg');
},
function () {
    $(this).removeClass('whitebg');
  }
);

Does anyone know a way I can fix this up?

Thanks!

Answer 1

id selectors take precedence over class selectors. You need !important

.whitebg {
background-color: #fff !important;
}