jQuery是一種受歡迎的JavaScript函式庫，可以方便地操作HTML文件和CSS樣式。使用jQuery時，常常需要設定滑鼠事件，例如mouseover（滑鼠移入）和mouseout（滑鼠移出）。本文將介紹如何使用jQuery設定li的mouseover事件。
首先，我們需要準備一個包含一些li元素的HTML文檔，如下所示：
<ul> <li>选项1</li> <li>选项2</li> <li>选项3</li> </ul>
在HTML文檔的
標籤中，添加以下程式碼引入jQuery庫：<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
注意，這裡使用的是CDN鏈接，可以使頁面加載速度更快。
接下來，我們使用jQuery來設定li的mouseover事件。在頁面載入完成後，選取所有的li元素，使用mouseover方法新增事件處理程序：
<script>
$(document).ready(function(){
$('li').mouseover(function(){
$(this).css('background-color', 'yellow');
});
});
</script>這段程式碼的意思是，在文件載入完成後，選取所有的li元素，並在滑鼠移入時將背景顏色設定為黃色。 $(this)表示當前的li元素。
我們將完整的程式碼貼到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>
除了mouseover事件，我們還可以加入mouseout事件，也就是滑鼠從元素移開時觸發的事件。在上面的程式碼中，我們可以在mouseover事件中加入mouseout事件：
<script>
$(document).ready(function(){
$('li').mouseover(function(){
$(this).css('background-color', 'yellow');
}).mouseout(function(){
$(this).css('background-color', '');
});
});
</script>這段程式碼的意思是，在滑鼠移入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');
}).mouseout(function(){
$(this).css('background-color', '');
});
});
</script>
以上是jquery設定li的mouseover的詳細內容。更多資訊請關注PHP中文網其他相關文章！
