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

您有由一個事實，即沒有時間爲用戶移動造成的問題的在按鈕上的鼠標移出事件觸發前，將鼠標移到該對象上。你需要給他們一點時間用鼠標到達那裏。

此外，我更喜歡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); 
});