HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>out vs leave</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    div.out { width: 40%; height: 120px; margin: 0 15px 15px 0; background: #d6edfc; float: left; padding: 8px; box-sizing: border-box; }
    div.in { width: 60%; height: 60%; background: #fc0; margin: 10px auto; display: flex; align-items: center; justify-content: center; font-size: 12px; }
    p { line-height: 1em; margin: 0; padding: 0; font-size: 13px; }
    .clear { clear: both; }
    #hint { color: #64748b; font-size: 14px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <p id="hint">Left: mouseout (bubbles). Right: mouseleave (no child re-fire).</p>
  <div class="overout">
    <p>move your mouse</p>
    <p>mouseout count <span>0</span></p>
    <div class="in">inner</div>
  </div>
  <div class="enterleave">
    <p>move your mouse</p>
    <p>mouseleave count <span>0</span></p>
    <div class="in">inner</div>
  </div>
  <div class="clear"></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var i = 0;
    $("div.overout")
      .on("mouseover", function() {
        $("p", this).first().text("mouse over");
      })
      .on("mouseout", function() {
        $("p", this).first().text("mouse out");
        $("p span", this).last().text(++i);
      });
    var n = 0;
    $("div.enterleave")
      .on("mouseenter", function() {
        $("p", this).first().text("mouse enter");
      })
      .on("mouseleave", function() {
        $("p", this).first().text("mouse leave");
        $("p span", this).last().text(++n);
      });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery mouseout — mouseout vs mouseleave (Try It)