Enable / disable runtime hover style?

Question

In my css, I have this:

#panel li:hover { background-color: #ffa; } 

under some condition, I would like to disable style-hovering from li elements, something like:

 function start() { $('#panel li').ignoreHoverRules(); } 

and turn it back on later:

 function end() { $('#panel li').reenableHoverRules(); } 

Is something like this possible? Not sure how to "enable" or "disable" runtime style rules,

thanks

Answer 1

Definitely, the easiest way to do this is to add a class to your <li> elements:

 #panel li.allowHover:hover { background-color: #ffa; } 

 function start() { $('#panel li').removeClass("allowHover"); } function end() { $('#panel li').addClass("allowHover"); } 

Otherwise, you find yourself in very uncomfortable territory using CSS rules - this is not an easy task .