jquery - 使用 jquery 删除 css :hover 属性

Question

可以说我有

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

当我将鼠标悬停在提交上时，#container仍然是红色的。我可以用jquery删除：鼠标悬停在输入鼠标上吗？我不想改变 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

我们可以在 css 和 Jquery 的帮助下覆盖 CSS 悬停效果

$('div').hover(function(){ $(this).addClass('nohover');})

In CSS Add Class .nohover
.nohover {
pointer-events:none;
}

Answer 6

我应用了这个：

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

它似乎可以在保留原始 CSS 的同时删除悬停属性。

Answer 7

我认为这更好

<style>
    .red:hover { background-color:red; }
</style>
<!-- by default is On-->
<div class="box red"></div>
<script>
    $('.box').click(function(){
        $(this).toggleClass('red');
    });
</script>