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