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

.disabled {

  opacity: 0.5;
  pointer-events: none;

}

.disabled:hover *

  pointer-events: none;
  cursor: not-allowed;

}