不再悬停时如何隐藏div答案

【问题标题】：How can I hide a div when not hovering anymore不再悬停时如何隐藏div
【发布时间】：2010-08-28 18:37:19
【问题描述】：

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

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

【问题讨论】：

标签： jquery hover show-hide

【解决方案1】：

.hover() 处理程序将为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()，您将在其中使用.hide()。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：