jquery - 在 mouseenter 和 mouseleave 上切换脱节的 div？答案

【问题标题】：jquery - Toggle disjointed div on mouseenter and mouseleave?jquery - 在 mouseenter 和 mouseleave 上切换脱节的 div？
【发布时间】：2012-09-27 21:31:14
【问题描述】：

我尝试搜索类似的问题并将这些回答用于我的情况，但要么我做错了（可能......），要么这不是我所需要的？

基本上，当悬停在#b-hover-nav 上时，我试图切换 .block-5。但是，我希望 .block-5 保持打开状态，以便用户可以阅读/与其中的链接进行交互...示例中的其他链接也是如此...

我已经在 jsfiddle (http://jsfiddle.net/9fcFv/) 上发帖，但我也将其包括在下面：

#content {
     width: 400px;
    height: 400px;
}
span.button-hover-nav {
 display: block;
 clear: both;  
  width: 200px;    
    margin-bottom: 20px;
}
.left {
      width: 200px;
      float: left;
}
.block-5 {
     display: none;
    width: 200px;
    float: right;
}
.block-5 a {
     color: blue;
}
.block-6 {
     display: none;
    width: 200px;
    float: right;
}
.block-6 a {
     color: green;
}


<div class="body">
 <span class="button-hover-nav" id="b-hover-nav">Hover Me</span>
</div>

<div class="block-5">
<h1>Please stay open unless I leave...</h1>
<a link="#">Click Me</a>
</div>

//Totally does not work:
// Bind the mouse over /out to the first DIV.
            $('#b-hover-nav').live('mouseenter', function() {
        $('.block-5').show();
    }).live('mouseleave', function() {
        t = setTimeOut(function() {
            $('.block-5').hide();
        }, 100);
    });

    $('.block-5').live('mouseenter', function() {
        if(t) {
            clearTimeout(t);
            t=null;
        }
    });

【问题讨论】：

标签： jquery mouseenter mouseleave

【解决方案1】：

您遇到的问题是由于在按钮上的 mouseout 事件触发之前用户没有时间将鼠标移到对象上。你需要给他们一点时间才能用鼠标到达那里。

另外，我更喜欢 jQuery 的内置悬停方法。但是如果你愿意，你可以使用绑定。

JSFiddle

var timer1,timer2;
var delay=1000;
$("#b-hover-nav").hover(function() {
    clearTimeout(timer1);
    $('.block-6').hide();
    $('.block-5').show();
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, delay);
});

$("#c-hover-nav").hover(function() {
    clearTimeout(timer2);
    $('.block-5').hide();
    $('.block-6').show();
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-6").hover(function() {
    clearTimeout(timer2);
}, function() {
    timer2= setTimeout(function() {
        $('.block-6').hide();
    }, delay);
});

$(".block-5").hover(function() {
    clearTimeout(timer1);
}, function() {
    timer1= setTimeout(function() {
        $('.block-5').hide();
    }, 2000);
});

【讨论】：