jQuery mouseleave() vs mouseout() Method

Last Updated:

jQuery mouseleave() vs mouseout() Method

The jQuery mouseleave method triggers when a mouse left a specified element.

The jQuery mouseout method triggers when a mouse moved out of a specified element.

Note: Unlike mouseout event, mouseleave event to a parent element will affect its child elements.

Example

HTML Editor
<!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() Method</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> </body> </html>

Share this Page

Meet the Author