在运行时启用/禁用悬停样式？

Question

在我的CSS中我有这个:

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

在某种情况下,我想禁用从li项目悬停样式,如:

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

并在以后重新启用它:

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

有可能吗？不确定如何在运行时"启用"或"禁用"悬停样式规则,

谢谢

Answer 1

绝对最简单的方法是在<li>元素中添加一个类:

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

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

否则,你通过操纵CSS规则进入非常尴尬的领域 - 这不是一件容易的事.