當鼠標指針離開被選元素時，會發生mouseleave事件。與mouseout事件不同，mouseleave只有在鼠標指針離開被選元素本身時才觸發，不會對子元素的移出行為作出響應。

mouseleave與mouseout的區別（重點！）

事件

觸發條件

適用場景

mouseleave

鼠標指針離開被選元素時觸發

懸停效果、下拉菜單等需要精確控制的交互

mouseout

鼠標指針離開被選元素或其任何子元素時觸發

一般性鼠標離開事件

關鍵區別：當鼠標從父元素移動到子元素時，mouseout會觸發，而mouseleave不會觸發。

為什麼必須使用mouseleave而不是mouseout？

下拉菜單的完美案例：這是mouseleave最重要的應用場景。

<style>
  nav {
    background-color: #333;
  }
  ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  ul.menu > li {
    position: relative;
  }
  ul.menu > li > a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
  }
  ul.submenu {
    list-style: none;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #555;
    display: none;
    width: 200px;
  }
  ul.submenu li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
  }
  ul.submenu li a:hover {
    background-color: #777;
  }
</style>

<nav>
  <ul class="menu">
    <li><a href="#">首頁</a></li>
    <li class="dropdown">
      <a href="#">產品</a>
      <ul class="submenu">
        <li><a href="#">產品 A</a></li>
        <li><a href="#">產品 B</a></li>
        <li><a href="#">產品 C</a></li>
      </ul>
    </li>
    <li><a href="#">關於我們</a></li>
  </ul>
</nav>
$(document).ready(function() {
  // 正確的實現方式：使用mouseleave
  $(".dropdown").hover(
    function() { // 鼠標進入 .dropdown 區域
      $(this).find(".submenu").stop(true, true).slideDown(200);
    },
    function() { // 鼠標離開 .dropdown 區域
      $(this).find(".submenu").stop(true, true).slideUp(200);
    }
  );
  
  // 如果使用mouseout，當鼠標在"產品"和"產品A"之間移動時，菜單會不停地閃爍和消失
  // $(".dropdown").mouseout(function() {
  //   $(this).find(".submenu").slideUp(200);
  // });
});

基礎使用

1. 當鼠標離開元素時改變背景色

$("p").mouseleave(function() {
  $(this).css("background-color", "#E9E9E4");
});

2. 懸停效果（mouseenter + mouseleave）

$("#hover-target").on("mouseenter", function(e) {
  $("#my-tooltip").css({
    top: e.pageY + 15,
    left: e.pageX
  }).show();
}).on("mouseleave", function() {
  $("#my-tooltip").hide();
});

3. 使用.hover()方法簡化代碼（推薦）

$("#hover-target").hover(
  function(e) { // 鼠標進入
    $("#my-tooltip").css({
      top: e.pageY + 15,
      left: e.pageX
    }).show();
  },
  function() { // 鼠標離開
    $("#my-tooltip").hide();
  }
);

為什麼.hover()方法更受歡迎？

.hover()是jQuery提供的一個便利方法，它實際上是mouseenter和mouseleave的簡寫形式，使用起來更簡潔：

$("#element").hover(
  function() { /* 鼠標進入 */ },
  function() { /* 鼠標離開 */ }
);

實際應用小貼士

  1. 使用.stop()防止動畫隊列堆積：在動畫效果中，使用.stop(true, true)可以清除當前動畫隊列，避免連續觸發導致的卡頓。
  2. 結合CSS過渡效果：可以配合CSS的transition屬性，實現更流暢的懸停效果。
  3. 響應式設計：在移動設備上，由於沒有真正的"鼠標移出"事件，需要考慮使用touchstart等事件作為替代。