CODEWITHSUNDEEP
jquery
John Travolta
John Travolta

Reputation: 604

remove css :hover attribute with jquery

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

Upvotes: 18

Views: 51303

Answers (7)

Alex Mihalych
Alex Mihalych

Reputation: 1

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>

Upvotes: 0

Rohit
Rohit

Reputation: 11

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

Upvotes: 1

anon
anon

Reputation:

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.

Upvotes: 0

user2412642
user2412642

Reputation: 161

Depending on your browser pointer-events:none might help

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Upvotes: 1

Syon
Syon

Reputation: 1614

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>

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191729

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

Upvotes: 6

VisioN
VisioN

Reputation: 145368

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>

Upvotes: 24

Related Questions