javascript - 未选中复选框时启用悬停，选中复选框后禁用悬停

Question

我正在尝试在未选中复选框时启用悬停(添加“.add_link_twitter_hover”类)并在选中复选框后将其禁用(删除“.add_link_twitter_hover”类)，就像 Pinterest 为 Twitter 执行此操作一样/用户添加图钉时的 Facebook 复选框:

我试过了，但是一旦鼠标指针离开，它就不会禁用悬停(不会删除“.add_link_twitter_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>

这是CSS:

.add_link_twitter{
    position:absolute;
    left:15px;
    bottom:16px;
    color: #a19486;
    border: 2px solid transparent;
    border-color: #F0EDE8;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.active {
    border-color: #468BD0;
    color: #468BD0;
    background-color: whiteSmoke;
}

.add_link_twitter_hover
{
    color: #A19486;
    border: 2px solid transparent;
    border-color: #C2B1A2;
    border-radius: 4px;
    background-color: white;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Answer 1

试试这个:

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

通常使用 .hover() method 的方法是提供两个函数:第一个在鼠标移到相关元素上时调用，第二个在鼠标移出时调用。

所以我在上面所做的是在第一个函数 (mouseenter) 中，如果未选中复选框，我已经添加了你的类。在第二个函数 (mouseleave) 中，我只是删除了类。