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!

Answer 1

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

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

Answer 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();
    })
  }
});

Answer 3

You can bind two events to same elements like bellow.And use separate function to get what your want

var myFunction1 = function() {
   $('div.description').show();
}
var myFunction2 = function() {
  // do whatever you want
}
$('div.image')
    .click(myFunction1)
    .mouseover(myFunction2)

Answer 4

Use this script

   jQuery(document).ready(function() {
        jQuery('.overlay').hide();
    });
    jQuery(document).ready(function() {
        jQuery('.element, .element-1').hover(function() {
            jQuery('.overlay').show();
            },
        function() {
            jQuery('.overlay').hide();
            });
    });