使用 jquery 删除 css :hover 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13725811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove css :hover attribute with jquery
提问by John Travolta
Lets say I have
可以说我有
<style>
#container:hover{background:red}
</style>
<div id="container"><input type="submit"></div>
When I hover on submit, #containeris still red. Can I remove that :hover on input mouseover with jquery? I do not want to change bg $('#container').css('backgroundColor','color'), I need something like $('#container').removeAttr('hover').
当我悬停在提交上时，#container仍然是红色的。我可以删除 :hover on input mouseover with jquery 吗？我不想改变 bg $('#container').css('backgroundColor','color')，我需要类似的东西 $('#container').removeAttr('hover')。
回答by VisioN
Unfortunately it is impossible to manage CSS pseudo-classes with jQuery.
不幸的是，用 jQuery 管理 CSS 伪类是不可能的。
I'd suggest you to manipulate classes, as follows:
我建议您操作类，如下所示：
<style>
.red:hover{background:red}
</style>
<div id="container" class="red"><input type="submit"></div>
<script>
$("#container").removeClass("red");
</script>
回答by Explosion Pills
You can't remove pseudo-class rules, but you can override them with event bindings:
您不能删除伪类规则，但可以使用事件绑定覆盖它们：
$("#container").on('mouseover', function () {
$(this).css('background', 'blue');
}).on('mouseout', function () {
$(this).css('background', whateverItIsNormally);
});
回答by Syon
This may be a bit convoluted and could certainly use optimization, but you could use a combination of things posted so far:
这可能有点复杂，当然可以使用优化，但您可以使用到目前为止发布的内容的组合：
jsFiddle: http://jsfiddle.net/psyon001/Vcnvz/2/
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>
回答by user2412642
Depending on your browser pointer-events:none might help
根据您的浏览器指针事件：无可能有帮助
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
回答by Rohit
We can Override CSS hover effect with the help of css and Jquery
我们可以借助 css 和 Jquery 覆盖 CSS 悬停效果
$('div').hover(function(){ $(this).addClass('nohover');})
In CSS Add Class .nohover
.nohover {
pointer-events:none;
}
回答by Alex Mihalych
I think this is better
我觉得这个更好
<style>
.red:hover { background-color:red; }
</style>
<!-- by default is On-->
<div class="box red"></div>
<script>
$('.box').click(function(){
$(this).toggleClass('red');
});
</script>
回答by Shuffy
I applied this:
我应用了这个：
element.click(function(){
element.hover(
function(){
element.css('background-color', '');
element.css('color', '');
},
function(){
element.css('background-color', '');
element.css('color', '');
});
});
And it seemed to work in removing the hover properties while retaining the original CSS.
它似乎可以在保留原始 CSS 的同时删除悬停属性。
