jquery - ホバリングしていないときにdivを非表示にするにはどうすればよいですか？

Question

私はJqueryを使用してshowdivを非表示にしています。'.microblogpostwrapper'がホバーされているときはdivを表示し、ホバーされていないときは非表示にします。最初のビットは完了しましたが、ホバーしないと非表示にできません。

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

Answer 1

ハンドラーは、に対して1回.hover()、に対して1回起動mouseenterしmouseleaveます。

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

.toggle()ブール値を：に渡すことにより、適切なトグルが実行されるようにすることができます。

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

hover()または、2番目の関数を使用する場所に渡すこともできます.hide()。

Answer 2

uは、mouseenter / mouseleaveを使用して、バブリングを停止できます（マウスの移動中にホバーを再度呼び出す）:::

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

Answer 3

jQueryは、 .hover() 2つのハンドラーをバインドします。1つは「in」用、もう1つは「out」用です。以下は、あなたが望むことを達成するはずです（ただし、わずかな速度向上のために、操作している要素を変数に割り当てる価値があるかもしれません）：

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