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

NvdB31 picture NvdB31 · Apr 27, 2014 · Viewed 22.1k times · Source

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!

Answer

Pankaj Sharma picture Pankaj Sharma · Apr 27, 2014
var cancel = false;
$(".another").hover(function(){
    $("div.description").show();
},function(){
  if(!cancel)
  $("div.description").hide();
});

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