mouseleave triggered at the intersection of blocks

Question

need to sidebar was functional, but when you move the cursor to the left of <div id="out_trigger"></div> worked Event alert('cursor out...').

Now the event is triggered when you hover over an element el_1,el_2. This should not be.

https://jsfiddle.net/vkymqd6h/

solution has been found: https://jsfiddle.net/ahpfx551/

Answer 1

Try this one

#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;
}

here is the jsfiddle

Answer 2

The problem is with your CSS. Here is My fiddle deleting the CSS. Which is working fine

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

Answer 3

Just change your code from mouseleave to mouseout

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

Answer 4

The problem here is with the positioning and the hierarchy of elements. However, if you do stick to keeping the same structure, you have to bypass the left_sidebar div.

The following code works:

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