删除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。