mouseleave, срабатывающий при пересечении блоков

Question

Необходимость боковой панели была функциональной, но при перемещении курсора влево от <div id="out_trigger"></div>работано предупреждение о событии ('курсор out ...').

Теперь событие срабатывает при наведении на элемент el_1, el_2. Этого не должно быть.

https://jsfiddle.net/vkymqd6h/

решение было найдено: https://jsfiddle.net/ahpfx551/

Answer 1

Проблема с вашим CSS. Вот My fiddle удаление CSS. Который работает отлично

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

Answer 2

Просто измените свой код от MouseLeave к MouseOut

$("#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 div.

Следующий код работает:

$("#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'); 
}