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

Answer 1

Try this:

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

}