Disable :hover on click

Question

I have a div that has hover:

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

But I want to disable the hover when you click on the div.

Answer 1

Option 1. The Javascript solution

Simply add a class prohibiting the application of hover styling on click:

$('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. The CSS solution

Alternatively, in pure CSS (although without rule persistence)

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

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

Answer 2

All you need is this:

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