未選中復選框時啟用懸停，選中復選框后將其禁用

Question

我正在嘗試啟用懸停（在未選中復選框時添加'.add_link_twitter_hover'類）並禁用它（刪除'.add_link_twitter_hover'類）一旦選中該復選框，就像Pinterest為Twitter / Facebook復選框所做的那樣用戶添加一個pin：

我試過這個，但是一旦鼠標指針離開，它就不會禁用懸停（不會刪除'.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()方法的常用方法是提供兩個函數：第一個是在鼠標移動到相關元素上時調用的，第二個是在鼠標移出時調用的。

所以我上面做的是在第一個函數（mouseenter）中，如果沒有選中復選框，我已經添加了你的類。 在第二個函數（mouseleave）中我只刪除了類。

Answer 2

這可以在沒有任何javascript的情況下完成。 如果您希望始終擁有“publish_to_twitter”類，只需將這兩個狀態與偽類分開：

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

我在選擇器中添加了input元素，以確保選中的樣式優先。 只需確保對於您設置的每種樣式：懸停，您都有相同的樣式：選中。