在實際的開發過程中，我們可能會遇到這種需求，如下圖
左邊是三個tab欄，右邊是顯示內容的div，當鼠標滑到坐標的tab上時，給它一個高亮顯示，讓它對應的內容在右邊的div中顯示出來，當鼠標移出的時候把tab欄上的高亮顯示去掉，右邊的內容也隱藏掉，這就是普通的tab切換。現在需求是這樣，當鼠標從左邊的tab欄移出，而且沒有移進右邊的div區域，讓它的效果消失，但當鼠標從左邊的tab欄移出，移進了右邊的div區域，保持效果，當鼠標從右邊的div區域移出的時候再取消效果。
大體思路是這樣的，當鼠標從左側的tab欄移出的時候給它加一個定時器setTimeout，讓這個效果過0.5秒消失，如果在這個時間內鼠標移動到了右側的div區域，取消定時器，當鼠標從右側的div區域離開時，再加上定時器。話不多說了，直接上代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main {
width: 300px;
height: 800px;
float: left;
}
.main > div {
width: 300px;
height: 100px;
margin-top: 50px;
border: 1px solid red;
}
.main > div.current {
background-color: deeppink;
}
.main2 {
width: 400px;
height: 400px;
border: 1px solid #3C3C3C;
float: left;
margin-left: 100px;
margin-top: 50px;
}
.main2 > div {
width: 800px;
height: 800px;
display: none;
}
.main2 > div.active {
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="current"></div>
<div></div>
<div></div>
</div>
<div class="main2">
<div class="active">111</div>
<div>222</div>
<div>333</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(function(){
var timer = null;
$('.main div').each(function(index){
$('.main div').eq(index).on('mouseenter',function(){
$(this).addClass("current");
$('.main2 div').eq(index).addClass("active");
})
$('.main div').eq(index).on('mouseleave',function(){
timer = setTimeout(function(){
$(".main div").eq(index).removeClass("current");
$('.main2 div').eq(index).removeClass("active");
},500);
})
$('.main2 div').eq(index).on('mouseenter',function(){
clearTimeout(timer);
})
$('.main2 div').eq(index).on('mouseleave',function(){
$(".main div").eq(index).removeClass("current");
$('.main2 div').eq(index).removeClass("active");
})
})
})
</script>
</body>
</html>