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

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 规则时陷入非常尴尬的境地 - it's no easy task .