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