Javascript 未选中复选框时启用悬停（&；选中复选框后禁用它

我尝试在未选中复选框时启用悬停（添加“.add_link_twitter_hover”类），并在选中复选框后禁用它（删除“.add_link_twitter_hover”类），就像用户添加pin时Pinterest对twitter/Facebook复选框所做的操作一样：

我尝试了这个方法，但当鼠标指针离开时，它不会禁用悬停（不会删除“.add\u link\u twitter\u hover”类）：

   var hoverTwitter = "add_link_twitter_hover";
$(postTwitter + " input").click(function(e) {
            $(this).parent().removeClass(hoverTwitter);
    $(this).parent().toggleClass(activePostTwitter);
});


$("label.add_link_twitter").hover(function(e) {
    if($("input.publish_to_twitter").is(":checked")) {
          $(this).removeClass(hoverTwitter);
      return;
    }
    $(this).addClass(hoverTwitter);
});

知道如何在未选中复选框时启用悬停并在选中复选框后禁用它吗？提前谢谢

以下是jQuery：

var postTwitter = ".add_link_twitter"; 
var activePostTwitter = "active"; 
$(postTwitter + " input").click(function(e) {
    $(this).parent().toggleClass(activePostTwitter);
});

以下是html：

<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>

试试这个：

$("label.add_link_twitter").hover(function(e) {
    if(!$("input.publish_to_twitter").is(":checked"))
          $(this).addClass(hoverTwitter);
}, function() {
    $(this).removeClass(hoverTwitter);
});

通常使用的方法是提供两个函数：当鼠标移动到相关元素上时调用第一个函数，当鼠标移出时调用第二个函数

---

因此，我在上面所做的是在第一个函数（mouseenter）中，如果没有选中复选框，我就添加了您的类。在第二个函数（mouseleave）中，我只是删除了这个类。

这可以在没有任何javascript的情况下完成。如果希望始终使用“publish_to_twitter”类，只需使用伪类将这两个状态分开即可：

.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}

我在选择器中添加了输入元素，以确保选中的样式优先。只需确保对于使用：hover设置的每个样式，在：checked中都有一个等效的样式

.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}