javascript - Disable :hover on click -

i have div has hover:

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

but want disable hover when click on div.

option 1. javascript solution

simply add class prohibiting application of hover styling on click:

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

div {    color: blue;  }  div:not(.no-hover):hover { /* apply hover styling when div not have 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 rule persistence)

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

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