mouseleave在塊的交集處觸發

Question

需要側欄功能，但是當您將光標移動到<div id="out_trigger"></div>的左側時發生了事件警報（'遊標移出...'）。

現在，當您將鼠標懸停在某個元素el_1，el_2上時，會觸發該事件。這不應該。

https://jsfiddle.net/vkymqd6h/

解決方案已經發現：https://jsfiddle.net/ahpfx551/

Answer 1

問題是與你的CSS。這裏是刪除CSS的My fiddle。這是工作的罰款

#out_trigger{ 
background: red; 
height: 100px; 
width: 100px; 
} 

Answer 2

剛剛從鼠標離開改變你的代碼鼠標移開

$("#out_trigger").mouseout(function(){ 
    alert('cursor out from #out_trigger'); 
}); 

Answer 3

試試這個

#out_trigger{ 
    background: red; 



    width: 50px; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    top: 0; 
    background-color: blue; 
    z-index: 2000; 

} 
#left_sidebar 
{ 
    position: fixed; 
    z-index: 4000; 
    top: 160px; 
    left: 0px; 
    width: 50px; 
    /* pointer-events: none; */ 
} 

.item 
{ 
    opacity: 0.5; 
    width: 35px; 
    height: 30px; 
    cursor: pointer; 
    color: white; 
    background-color: green; 
    transition: all 0.5s; 
    padding-top: 15px; 
    padding-left: 5px; 
} 

.item:hover{ 
    opacity: 1; 
} 

#sidebar_trigger{ 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 5px; 
    height: 100%; 
    background-color: red; 
    z-index: 999; 
} 

這裏是jsfiddle

Answer 4

這裏的問題是與定位和元素的層次結構。 但是，如果你堅持保持相同的結構，你必須繞過left_sidebar股利。

下面的代碼工作：

$("#out_trigger").mouseout(onMouseOut); 

function onMouseOut(event) { 
    //the original element the event handler was assigned to 
    var e = event.toElement || event.relatedTarget; 

    while (e && e.parentNode && e.parentNode != window) { 
    if (e.parentNode == this || e == this) { 
     if (e.preventDefault) e.preventDefault(); 
     return false; 
    } 
    e = e.parentNode; 
    } 

    // mouse event handled here 
    alert('cursor out from #out_trigger'); 
}