<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style>
h1+div{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: center;
}
.parentDiv{
border: 1px solid black;
width: 250px;
margin: 5px;
}
.childDiv{
border: 1px solid red;
width: 180px;
height: 50px;
margin: 10px 25px;
}
</style>
</head>
<body>
<h1>jQuery mouseout() vs mouseleave() Methods</h1>
<div>
<div class="parentDiv myMouseOut">
Parent Div
<div class="childDiv ">Child div<br>Touch me and go away</div>
<p>Mouseout - <span id="point">0</span></p>
</div>
<div class="parentDiv myMouseLeave">
Parent Div
<div class="childDiv ">Child div<br>Touch me and go away</div>
<p>Mouseleave - <span id="point1">0</span></p>
</div>
</div>
<script>
$(document).ready(function(){
var count = 0;
var count1 = 0;
$(".myMouseOut").mouseout(function(e){
count += 1;
$("#point").text(count);
});
$(".myMouseLeave").mouseleave(function(e){
count1 += 1;
$("#point1").text(count1);
});
});
</script>
<p><strong>mouseout()</strong> - will affect its child elements.</p>
<p><strong>mouseleave()</strong> - will not affect its child elements.</p> </body>
</html>