How can I hide a div when not hovering anymore

Question

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

Answer 1

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

Answer 2

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().

Answer 3

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