CODEWITHSUNDEEP
jquerymouseovershowjquery-hovermouseleave
NvdB31
NvdB31

Reputation: 312

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!

Upvotes: 3

Views: 22348

Answers (4)

Manish Negi
Manish Negi

Reputation: 270

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

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

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

Upvotes: 1

Pankaj Sharma
Pankaj Sharma

Reputation: 1853

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

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

Upvotes: 6

underscore
underscore

Reputation: 6887

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)

Upvotes: 0

Related Questions