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 wh开发者_JS百科en not hovered. Got the first bit done but can't get it to hide when not hovered.

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

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

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

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