HTML Editor
<!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>
OUTPUT
×

Save as Private