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: 
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.