2層2 mouse_over

Question

js。 jQuery的。 有兩個大對象，其間有0px間隔。他們班是'.big'。有兩個小的對象，其類是'.small'。每個小物體位置都與一個'.big'物體發生碰撞。如果mouse_enter'.big'類對象，則funcStart（）;如果mouse_leave則funcStop（）。 如果鼠標從'.big'對象轉到'.small'，則會啓動funcStop（），因爲儘管'.small'對象位於'.big'之上，但鼠標仍然位於'.big'之外。 我需要'.small'上的鼠標懸停是活動的（按鈕），但funcStop（）不需要運行，因爲鼠標在'.small'對象結束時也會超過'.big'對象。

<div class=".big"></div> 
<div class=".small"></div> 
<div class=".big"></div> 
<div class=".small"></div> 

$(".big").mouseover(function(){ 
    funcStart(); 
}); 
$(".big").mouseout(function(){ 
    funcStop(); 
}); 

嘗試之類的東西：

$(".big").mouseout(function(){ 
    $(".small").mouseout(function(){ 
     var DONTSTOP = true; 
    }); 
    if(!DONTSTOP) { 
     funcStop(); 
    } 
}); 

這是工作，如果我使用的setTimeout（）; ，但是這一次，當我們用鼠標從第一'.big'對象到第二'.big'對象函數funcStop（）;不要跑。從stackoverflow嘗試了很多。請幫忙。對不起英文。 謝謝。

Answer 1

我認爲你的問題是兄弟姐妹vs孩子。看看這個草圖顯示行爲的差異。如果嵌套div不是孩子，那麼鼠標確實會離開外部元素。它必須是鼠標留下的孩子。缺點是如果元素擴展出來，那麼你的鼠標也會被擴展。

<div class ="big">1 big sibling.</div> 
<div class ="small">2 small sibling.</div> 

<div class ="big">3 big parent. 
    <div class = "small">4 small child.</div> 
</div> 

http://codepen.io/anon/pen/RaJEOo

Answer 2

我會建議你使用mouseenter/mouseleave事件，而不是。原因是mouseover和mouseout在光標周圍移動光標時發生了幾次，這可能會導致不需要的行爲。

那麼試試這個：

<div class=".big"></div> 
<div class=".small"></div> 
<div class=".big"></div> 
<div class=".small"></div> 

$(".big").mouseenter(function(){ 
    funcStart(); 
    $(".small").on('mouseenter', function(){//Do Your Magic, Mouse is over the .small}); 
    $(".small").on('mouseleave', function(){//Do Your Magic, Mouse retuned to .big}); 
}); 
$(".big").mouseleave(function(){ 
    funcStop(); 
});