Enable/disable hover style at runtime?

Question

In my css I have this:

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

under some condition I'd like to disable to hover style from the li items, something like:

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

and re-enable it later:

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

is something like that possible? Not sure how to 'enable' or 'disable' the hover style rules at runtime,

Thanks

Answer 1

Definitely the easiest way to do this is 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 get into very awkward territory with manipulating CSS rules - it's no easy task.