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

Question

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 1

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

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

Solution 2

You may try something like this: http://jqversion.com/#!/CCvqpwh

$('.image').bind('mouseenter', function(){
    $('.description').show();
}).bind('mouseleave', function(){
    $('.description').hide();
}).click(function(){
  if (!$(this).hasClass('clicked')){
    $(this).addClass('clicked');
    $(this).unbind('mouseleave');
  } else {
    $(this).removeClass('clicked');
    $(this).bind('mouseleave', function(){
        $('.description').hide();
    })
  }
});

Comments

[Ehsan Sajjad]

what have you tired, show your code

[Sikshya Maharjan]

What would be easier than 'saying' all this, is seeing actual HTML.

[Adam]

Touch screen devices have no hover function, so you might want to call **$("div.description").show()" inside your click function if cancel is true.