<!DOCTYPE html>
<html lang="en-US">
<head>
<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>onmouseout vs onmouseleave</h1>
<div>
<div class="parentDiv" onmouseout="myMouseOut()">
Parent Div
<div class="childDiv ">Child div<br>Touch me and go away</div>
<p>onmouseout - <span id="point">0</span></p>
</div>
<div class="parentDiv" onmouseleave="myMouseLeave()">
Parent Div
<div class="childDiv ">Child div<br>Touch me and go away</div>
<p>onmouseleave - <span id="point1">0</span></p>
</div>
</div>
<script>
var count = 0;
var count1 = 0;
function myMouseOut(){
count += 1;
document.getElementById("point").innerText = count;
}
function myMouseLeave(){
count1 += 1;
document.getElementById("point1").innerText = count1;
}
</script>
<p><strong>onmouseout</strong> - Parent element will be affected by its child elements.</p>
<p><strong>onmouseleave</strong> - Parent element will not be affected by its child elements.</p> </body>
</html>