嗨！最近在做前端交互效果嗎？jQuery的hover事件是實現鼠標懸停效果的利器，今天就來詳細聊聊它的用法和示例吧！

hover()方法的基本概念

hover()是jQuery中一個非常實用的事件方法，它模仿了"懸停"（鼠標移動到元素上和移出元素）的交互效果。與原生的mouseover/mouseout相比，hover()會智能處理鼠標在子元素間移動時的"冒泡"問題，避免了常見的誤觸發問題。

重要提示：hover()方法會觸發mouseenter和mouseleave事件，而不是簡單的mouseover和mouseout。

hover()的兩種主要用法

用法一：指定移入和移出的函數

$(selector).hover(
  function() { /* 鼠標移入時執行的代碼 */ },
  function() { /* 鼠標移出時執行的代碼 */ }
);

用法二：指定同一個函數（jQuery 1.4+支持）

$(selector).hover(function() { /* 移入和移出都執行的代碼 */ });

詳細代碼例子

示例1：基礎懸停效果（表格行變色）

<!DOCTYPE html>
<html>
<head>
  <title>jQuery hover示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .table tr:hover { background-color: #f0f0f0; } /* CSS實現的基礎懸停效果 */
    .hover-row { background-color: #e6f7ff; } /* 自定義懸停樣式 */
  </style>
</head>
<body>
  <table border="1" class="table">
    <tr><td>行1</td></tr>
    <tr><td>行2</td></tr>
    <tr><td>行3</td></tr>
  </table>
  
  <h2>使用jQuery實現的懸停效果</h2>
  <table border="1" class="table-hover">
    <tr><td>行1</td></tr>
    <tr><td>行2</td></tr>
    <tr><td>行3</td></tr>
  </table>

  <script>
    // 為第二張表格添加hover效果
    $(".table-hover tr").hover(
      function() { // 鼠標移入
        $(this).addClass("hover-row");
      },
      function() { // 鼠標移出
        $(this).removeClass("hover-row");
      }
    );
  </script>
</body>
</html>

示例2：懸停改變文字顏色

$("p").hover(
  function() { // 鼠標移入
    $(this).css("color", "red");
  },
  function() { // 鼠標移出
    $(this).css("color", "black");
  }
);

示例3：懸停顯示/隱藏元素（實用場景）

<div class="clsTitle">點擊我查看簡介</div>
<div class="clsContent" style="display:none;">
  jQuery是由美國人John Resig於2006年創建的一個開源項目，它的主旨是：以更少的代碼，實現更多的功能
</div>

<script>
  $(".clsTitle").hover(
    function() { // 鼠標移入
      $(".clsContent").show();
    },
    function() { // 鼠標移出
      $(".clsContent").hide();
    }
  );
</script>

示例4：使用簡寫方式（mouseenter + mouseleave）

// 與上面的hover()效果相同
$(".clsTitle").mouseenter(function() {
  $(".clsContent").show();
}).mouseleave(function() {
  $(".clsContent").hide();
});

重要注意事項

  1. 區分jQuery hover和原生事件：jQuery的hover()比原生的mouseover/mouseout更智能，能避免在子元素上移動鼠標時觸發父元素的mouseleave事件。
  2. 參數是函數：hover()的參數必須是函數，不能是字符串或其他類型。
  3. this指向：在hover函數中，this指向當前被懸停的DOM元素。
  4. 事件冒泡處理：jQuery內部處理了事件冒泡問題，確保鼠標在父元素和子元素間移動時不會誤觸發mouseleave。
  5. jQuery 1.4+的簡寫：如果你希望移入和移出執行相同的代碼，可以只傳一個函數參數。

常見問題解答

Q：hover()和CSS :hover有什麼區別？ A：CSS :hover是純CSS實現，沒有JavaScript的交互能力；jQuery hover()可以執行更復雜的JavaScript邏輯，如改變多個元素的樣式、顯示隱藏內容等。

Q：為什麼我用hover()沒效果？ A：可能原因：

  • 沒有引入jQuery庫
  • 代碼寫在DOM加載前（確保在$(document).ready()內）
  • 選擇器不正確，找不到元素
  • 沒有正確設置CSS樣式

Q：hover()能綁定多個事件嗎？ A：可以，但通常不需要，因為hover()本身已經處理了移入和移出兩個事件。如果你想添加更多事件處理，可以使用.on()方法。

為什麼使用jQuery hover()？

想象一下，你正在做一個導航菜單，需要在鼠標懸停時顯示下拉菜單。使用jQuery hover()，你可以輕鬆實現這個效果，而不需要處理複雜的事件冒泡問題。相比原生事件，它讓代碼更簡潔、更易維護。

// 一個實用的導航菜單懸停效果
$(".nav-item").hover(
  function() {
    $(this).find(".dropdown").slideDown();
  },
  function() {
    $(this).find(".dropdown").slideUp();
  }
);