正文

轻松掌握jQuery：如何让UL中的LI在鼠标划过时动态变色

/0 浏览量
0619

在网页设计中，动态效果能够显著提升用户体验。jQuery是一个强大的JavaScript库，它可以帮助我们轻松实现各种动态效果。本文将详细介绍如何使用jQuery让UL中的LI元素在鼠标划过时动态变色。

准备工作

在开始之前，请确保您的网页中已经引入了jQuery库。以下是引入jQuery的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

CSS样式

首先，我们需要为UL和LI元素设置一些基本的CSS样式。这将有助于我们更好地观察动态效果。

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
}

jQuery代码

接下来，我们将使用jQuery为LI元素添加鼠标划过（hover）事件。当鼠标划过LI元素时，我们将改变其背景颜色。

$(document).ready(function() {
  $('li').hover(
    function() {
      $(this).css('background-color', '#ffcc00'); // 鼠标划过时的颜色
    },
    function() {
      $(this).css('background-color', '#f0f0f0'); // 鼠标离开时的颜色
    }
  );
});

代码解析

  1. $(document).ready(function() { ... });：确保在DOM元素加载完成后执行代码。
  2. $('li').hover(...);：为所有LI元素添加hover事件。
  3. 第一个函数（当鼠标划过时执行）：$(this).css('background-color', '#ffcc00'); 将当前LI元素的背景颜色设置为黄色。
  4. 第二个函数（当鼠标离开时执行）：$(this).css('background-color', '#f0f0f0'); 将当前LI元素的背景颜色恢复为灰色。

测试效果

将上述代码添加到您的HTML页面中，并保存。打开页面，您会发现当鼠标划过UL中的LI元素时，其背景颜色会变为黄色；当鼠标离开时，颜色会恢复为灰色。

总结

通过本文，您已经学会了如何使用jQuery让UL中的LI元素在鼠标划过时动态变色。这只是jQuery强大功能的一个例子。希望您能继续探索jQuery，并掌握更多实用的技巧。

-- 展开阅读全文 --