Lets say I have
<style>
#container:hover{background:red}
</style>
<div id="container"><input type="submit"></div>
When I hover on submit, #container is 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').
Unfortunately it is impossible to manage CSS pseudo-classes with jQuery.
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>
#container.red:hover { background: red; }?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);
});
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/
<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>
Depending on your browser pointer-events:none might help
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
We can Override CSS hover effect with the help of css and Jquery
$('div').hover(function(){ $(this).addClass('nohover');})
In CSS Add Class .nohover
.nohover {
pointer-events:none;
}
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.
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>
