在块的相交处触发mouseleave

Question

需要侧边栏功能正常，但是当您将光标移到<div id="out_trigger"></div>的左侧时，事件警报（'cursor out ...'）有效。

现在，当您将鼠标悬停在元素el_1，el_2上时，将触发事件。 这不应该。

https://jsfiddle.net/vkymqd6h/

找到解决方案： https : //jsfiddle.net/ahpfx551/

Answer 1

试试这个

#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 2

问题出在您的CSS。 这是我的小提琴手删除CSS。 哪个工作正常

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

Answer 3

只需将代码从mouseleave更改为mouseout

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

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');
}