jQuery mouseover() vs mouseenter() Method

Last Updated:

jQuery mouseover() vs mouseenter() Method

The jQuery mouseover method triggers when a mouse is over a specified element.

The jQuery mouseenter method triggers when a mouse entered a specified element.

Note: Unlike mouseenter event, the mouseover 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 mouseover() vs mouseenter() Method</h1> <div> <div class="parentDiv mymouseover"> Parent Div <div class="childDiv">Child div<br>Touch me and go away</div> <p>mouseover - <span id="point">0</span></p> </div> <div class="parentDiv mymouseenter"> Parent Div <div class="childDiv">Child div<br>Touch me and go away</div> <p>mouseenter - <span id="point1">0</span></p> </div> </div> <script> $(document).ready(function(){ var count = 0; var count1 = 0; $(".mymouseover").mouseover(function(e){ count += 1; $("#point").text(count); }); $(".mymouseenter").mouseenter(function(e){ count1 += 1; $("#point1").text(count1); }); }); </script> </body> </html>

Share this Page

Meet the Author