Jquery - Mouse events vs Z-Index

Question

I have the following problem: I created a div and within it there is a second div with a text.

<div class="red">
    <div class="blue">OK</div>
</div>

The div-parent received an event to display a message when the mouse passes over or exits it.

$(document).ready(function(){
    $('.red').mouseover(function(){
        alert('in');                                      
    }).mouseleave(function(){
        alert('out');
    });
});

But the div-son received an absolute positioning, linked to the relative positioning of the div-father, simplifying, the div-son will position itself exactly above the div-father

.red {width:200px;height:200px;background:red;position:relative}
.blue {width:100px;
    height:100px;
    background:blue;
    color:white;
    position:absolute;
    z-index:1;
}

https://jsfiddle.net/20gv6auu/4/

The problem is, if I mouse or take it off one of the Divs, the event will run normally, but when I step from the div-parent to the div-child and vice versa, the events are triggered.

I need Jquery to group the div-parent and div-child even though they are in absolute position, as if they were both a single element.

(BS.: It is crucial to maintain absolute positioning)

Answer 1

You need to use mouseenter instead of mouseover:

$(document).ready(function(){
    $('.red').mouseenter(function(){
        alert('in');                                      
    }).mouseleave(function(){
        alert('out');
    });
});

The mouseenter matches up with mouseleave (and behaves as you wish), while the mouseover goes hand in hand with the mouseout.

https://jsfiddle.net/20gv6auu/9/