Disable: hover

Question

I have a div that has a hang:

 .div { // css } .div:hover { // css } 

But I want to turn off the hang when you press the div .

Answer 1

Option 1: Javascript Solution

Just add a class that prohibits the use of the hover style when pressed:

 $('div').on('click', function() { // when you click the div $(this).addClass('no-hover'); // add the class 'no-hover' }); 

 div { color: blue; } div:not(.no-hover):hover { /* only apply hover styling when the div does not have the class 'no-hover' */ color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>hover!</div> 

Option 2: CSS Solution

Alternatively, in pure CSS (although without preserving the rules)

 div { color: blue; } div:not(:focus):hover { color: red; } div:focus { outline: none; } 

 <div tabindex="0">hover!</div> 

Answer 2

All you need is:

 $('[your selector]').css({'pointer-events': 'none'}) 

Answer 3

Try it like this:

 $('#myid').on({ mouseover: function(){ $(this).css({background: '#F94'}); }, mouseleave: function(){ $(this).css({background: '#DDD'}); }, click: function(){ $(this).off('mouseleave'); } }); 

JSFIDDLE DEMO

Answer 4

Try the following:

JQuery

 $(function() { //run when the DOM is ready $(".div").click(function() { //use a class, since your ID gets mangled $(this).addClass("active"); //add the class to the clicked element }); }); 

CSS

 .div.active:hover { cursor:default; //same CSS as the DIV }