jQuery：将mouseover和mouseout与toggleClass结合使用

我正在构建一个小型web应用程序，其中有一些可单击的区域和一些不可单击的区域。当用户的鼠标指针位于可单击区域上时，该区域将高亮显示，指针将变为手形。我也有一些区域最初是不可点击的，然后在点击按钮后变成可点击的，反之亦然。我在这些区域使用

toggleClass

方法。但我似乎无法在这些特定区域使用

mouseover

和

mouseout

方法

当我点击按钮时，我想改变鼠标指针和背景颜色，将鼠标指针悬停在“显示答案”和“提交”选项卡上，然后再次点击，我想将它们恢复到默认状态。现在，我只能改变指针

HTML

<div id="help" class="hover">Help</div>
<div id="switchplayer" class="hover">Switch to Two player</div>
<div id="showanswer">Show Answer</div>
<div id="submit">Submit</div>
<div id="start" class="hover">Start</div>

<button>Click me!</button>

CSS

div {
border:1px solid black;
}

.hover {
    cursor:pointer;
    cursor:hand;
}

---

您可以使用以下简单的CSS：

.hover:hover {
    background-color: red;
}

然后它就会像预期的那样工作

但是，如果此任务需要javascript，则应使用上的来委派事件：

$(document).on({
    mouseover: function() {
        $(this).css('background-color','red');
    },
    mouseout: function() {
        $(this).css('background-color', '');
    }
}, '.hover');

---

您可以使用以下简单的CSS：

.hover:hover {
    background-color: red;
}

然后它就会像预期的那样工作

但是，如果此任务需要javascript，则应使用上的来委派事件：

$(document).on({
    mouseover: function() {
        $(this).css('background-color','red');
    },
    mouseout: function() {
        $(this).css('background-color', '');
    }
}, '.hover');

---

正如dfsq所指出的，最简单的方法就是通过CSS。但是，代码不起作用的原因是

mouseover

和

mouseout

方法仅在执行这些方法时应用于具有

hover

类的元素。事件处理者不会追溯到满足原始选择标准的新元素。要将事件处理程序代码应用于以后获取该类的元素，请使用类似的变体：

---

正如dfsq所指出的，实现这一点最简单的方法就是通过CSS。但是，代码不起作用的原因是

mouseover

和

mouseout

方法仅在执行这些方法时应用于具有

hover

类的元素。事件处理者不会追溯到满足原始选择标准的新元素。要将事件处理程序代码应用于以后获取该类的元素，请使用类似的变体：

---

解释你的问题，并在问题中张贴代码。JS Fiddle是一个额外的功能，但是这个问题应该是独立的（尽管说明性的演示/复制非常有用）。JS Fiddle是一个额外的功能，但是这个问题应该是独立的（尽管说明性的演示/复制非常有用）。谢谢你，伙计！但您能解释一下为什么我的代码不起作用吗？因为没有

hover

类，事件不会附加到行。当您以后添加它时，您必须重新绑定事件，或者在上使用带有

的委派。谢谢，我收到了+1获得完整答案。是的，我需要javascript解决方案。谢谢你，伙计！但您能解释一下为什么我的代码不起作用吗？因为没有
hover
类，事件不会附加到行。当您以后添加它时，您必须重新绑定事件，或者在

上使用带有

的委派。谢谢，我收到了+谢谢你完整的回答！但我必须选择dfsq的答案，因为他是第一个回答的人。不过你得到的是+1:）谢谢！但我必须选择dfsq的答案，因为他是第一个回答的人。不过，你会得到+1:）