刪除CSS：用jQuery

Question

懸停屬性可以說我有

<style> 
    #container:hover{background:red} 
</style> 
<div id="container"><input type="submit"></div> 

當我將鼠標懸停在提交，#container仍爲紅色。我可以刪除：懸停在輸入與jQuery的mouseover？我不想改變bg $('#container').css('backgroundColor','color')，我需要類似$('#container').removeAttr('hover')。

Answer 1

不幸的是，用jQuery管理CSS僞類是不可能的。

我建議你來操縱類，如下：

<style> 
    .red:hover{background:red} 
</style> 

<div id="container" class="red"><input type="submit"></div> 

<script> 
    $("#container").removeClass("red"); 
</script> 

Answer 2

無法刪除僞類的規則，但您可以用事件綁定覆蓋它們：

$("#container").on('mouseover', function() { 
    $(this).css('background', 'blue'); 
}).on('mouseout', function() { 
    $(this).css('background', whateverItIsNormally); 
}); 

Answer 3

這可能有點複雜，並且可以肯定使用優化，但是您可以使用迄今爲止公佈的組合：

jsFiddle：http://jsfiddle.net/psyon001/Vcnvz/2/

<style> 
    .red{background:red;} 
</style> 

<div id="container"><input type="submit"></div> 

<script> 
$('#container').on({ 
    'mouseenter' : function(){ 
     $(this).addClass('red'); 
    }, 
    'mouseleave' : function(){ 
     $(this).removeClass('red'); 
    } 
}); 
$('#container').find('input').on({ 
    'mouseenter' : function(){ 
     $('#container').removeClass('red'); 
    }, 
    'mouseleave' : function(){ 
     $('#container').addClass('red'); 
    } 
}) 
</script> 

Answer 4

根據瀏覽器的指針的事件：無可能有助於

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 5

我應用這個：

element.click(function(){ 
    element.hover(
    function(){ 
    element.css('background-color', ''); 
    element.css('color', ''); 
    }, 
    function(){ 
    element.css('background-color', ''); 
    element.css('color', ''); 
    }); 
}); 

，它似乎在去除懸停性能工作，同時保留原來的CSS。