Search code examples
jquerymouseovershowjquery-hovermouseleave

Jquery: show/hide div on hover. Show on click

Let's assume I have a div with a .description class.

I would like div.description to be shown when user hovers over another div, with the .image class.

However, when user clicks on div.image, I would like div.description to stay visible. So if user clicks on .image, the mouseleave event should not be applied.

Lastly, when user clicks on the .image again, the hover function should be activated again. So that when mouse leaves .image1, div.description will be hidden again.

Hope you guys can help me!

Solution 
  • var cancel = false;
$(".another").hover(function(){
    $("div.description").show();
},function(){
  if(!cancel)
  $("div.description").hide();
});

$(".image").click(function(){
  cancel = (cancel)?false: true;
});