Check if cursor is inside element's parent

Question

I have this html

<div class='parent'> 
     <div class='child'></div> 
</div>

I wanna add a mouseover and mouseout events to parent element but, the problem is when the cursor hover child elemet it fires mouseout event although it acually still inside parent element. how I can avoid this to let mouseout event only fires when the cursor leaves parent item.

$(body).on('mouseover', '.parent' , function(){ /* do somthing */}); 
$(body).on('mouseout',  '.parent' , function(){ /* do another somthing */});

Answer 1

Use mouseenter and mouseleave instead of mouseover and mouseout which will solve your problem.

$(document).on('mouseenter', '.parent' , function(){
    console.log("Mouse Enter");
}); 
$(document).on('mouseleave',  '.parent' , function(){ 
        console.log("Mouse Leave");
});

Do not use stopPropagation() because The Dangers of Stopping Event Propagation.

Demo