Question

需要侧边栏功能正常，但是当您将光标移动到<div id="out_trigger"></div>左侧时，工作事件提醒（＆＃39;光标退出...＆＃39;）。

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

找到

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。这是My fiddle删除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');
}

mouseleave在块的交集处触发

4 个答案: