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 like this:

$('#myid').on({
    mouseover: function(){
        $(this).css({background: '#F94'});
    },
     mouseleave: function(){
        $(this).css({background: '#DDD'});
    },
    click: function(){
        $(this).off('mouseleave');
    }
});

JSFIDDLE DEMO