remove css :hover attribute with jquery

Question

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').

Answer 1

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>

Answer 2

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);
});