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

This is because of the specificity. you can use !important as the other posts suggested but
using !important in your CSS is a bad practice.

Use that as you last option.

Instead use two classes..

Make sure the inner most li has the default class to it..

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

Check Fiddle