jquery設定li的mouseover

jQuery是一種受歡迎的JavaScript函式庫，可以方便地操作HTML文件和CSS樣式。使用jQuery時，常常需要設定滑鼠事件，例如mouseover（滑鼠移入）和mouseout（滑鼠移出）。本文將介紹如何使用jQuery設定li的mouseover事件。

1. 準備HTML文檔

首先，我們需要準備一個包含一些li元素的HTML文檔，如下所示：

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

2. 引入jQuery庫

在HTML文檔的93f0f5c25f18dab9d176bd4f6de5d30e標籤中，添加以下程式碼引入jQuery庫：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

注意，這裡使用的是CDN鏈接，可以使頁面加載速度更快。

3. 寫jQuery程式碼

接下來，我們使用jQuery來設定li的mouseover事件。在頁面載入完成後，選取所有的li元素，使用mouseover方法新增事件處理程序：

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  });
});
</script>

這段程式碼的意思是，在文件載入完成後，選取所有的li元素，並在滑鼠移入時將背景顏色設定為黃色。 $(this)表示當前的li元素。

4. 測試效果

我們將完整的程式碼貼到HTML文件中，然後在瀏覽器中開啟該頁面。當滑鼠移動到li元素上時，該元素的背景顏色會變成黃色。

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

5. 新增mouseout事件

除了mouseover事件，我們還可以加入mouseout事件，也就是滑鼠從元素移開時觸發的事件。在上面的程式碼中，我們可以在mouseover事件中加入mouseout事件：

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  }).mouseout(function(){
    $(this).css('background-color', '');
  });
});
</script>

這段程式碼的意思是，在滑鼠移入li元素時將背景顏色設為黃色，在滑鼠移出時將背景顏色還原為空白。

6. 完整程式碼

最終的完整程式碼如下：

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      }).mouseout(function(){
        $(this).css('background-color', '');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

7. 總結

##本文介紹如何使用jQuery設定li的mouseover事件，在滑鼠移入時改變背景顏色，在滑鼠移出時還原背景顏色。透過這個例子，我們可以了解如何使用jQuery新增事件處理程序，以及如何使用CSS樣式來改變元素的外觀。在實際的網站開發中，我們可以根據需要使用不同的滑鼠事件和樣式規則，來實現更複雜的互動效果。

以上是jquery設定li的mouseover的詳細內容。更多資訊請關注PHP中文網其他相關文章！