jquery - 不再悬停时如何隐藏div

Question

我正在使用 Jquery 隐藏显示一个 div。我想在 '.microblogpostwrapper' 悬停时显示 div 并在未悬停时隐藏。完成了第一步，但在不悬停时无法隐藏。

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

Answer 1

处理程序将.hover()触发一次 formouseenter和一次 for 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()您将使用.hide().

Answer 2

jQuery.hover() 绑定了两个处理程序，一个用于“输入”，另一个用于“输出”。以下应该可以实现您想要的（尽管可能值得将您正在操作的元素分配给一个变量以稍微提高速度）：

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

Answer 3

你可以使用 mouseenter/mouseleave 来停止冒泡（鼠标移动时重新调用悬停）:::

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