CODEWITHSUNDEEP
jqueryhovershow-hide
user342391
user342391

Reputation: 7827

How can I hide a div when not hovering anymore

I am using Jquery to hide show a div. I want to show the div when '.microblogpostwrapper' is hovered and hidden when not hovered. Got the first bit done but can't get it to hide when not hovered.

  $(".microblogpostwrapper").hover(function(){ 
            $(this).find(".microblogpostactions").show();
                                });

Upvotes: 2

Views: 2585

Answers (3)

user113716
user113716

Reputation: 322492

The .hover() handler will fire once for mouseenter and once for mouseleave.

$(".microblogpostwrapper").hover(function(){ 
    $(this).find(".microblogpostactions").toggle(); // Toggle the show/hide
});

You can ensure the proper toggle is performed by passing a boolean value to .toggle():

$(".microblogpostwrapper").hover(function( e ){ 
    $(this).find(".microblogpostactions").toggle( e.type == 'mouseenter' );
});

Alternatively, you could pass a second function to hover() where you would use .hide().

Upvotes: 4

Vaibhav Gupta
Vaibhav Gupta

Reputation: 1612

u can use mouseenter/mouseleave to stop bubbling (re-calling hover while mouse moving):::

$(".microblogpostwrapper").mouseenter(function() {
    $(this).find(".microblogpostactions").show();
}).mouseleave(function() {
    $(this).find(".microblogpostactions").hide();
});​

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

jQuery's .hover() binds two handlers, one for 'in' and another for 'out.' The following should achieve what you want (although it might be worth assigning the element you're manipulating to a variable for a slight speed improvement):

$(".microblogpostwrapper").hover(
    function(){ 
        $(this).find(".microblogpostactions").show();
    },
    function(){
        $(this).find(".microblogpostactions").hide()
    }
);

Upvotes: 0

Related Questions