jquery -切换mouseenter和mouseleave上不连续的div？

Question

我试着搜索类似的问题，并根据我的情况使用这些回答，但要么我做错了(可能...)或者这不是我想要的？

本质上，当鼠标悬停在#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;
        }
    });

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

​