jquery鼠标进入时高亮显示

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地为网页添加交互性和动态效果。

类型

jQuery 的事件处理主要分为以下几类：

鼠标事件：如 mouseenter、mouseleave、mouseover、mouseout 等。
键盘事件：如 keydown、keyup、keypress 等。
表单事件：如 submit、change、focus、blur 等。
文档/窗口事件：如 load、unload、resize、scroll 等。

应用场景

在网页开发中，鼠标进入时高亮显示是一种常见的交互效果，常用于导航菜单、按钮、列表项等元素，以提升用户体验。

示例代码

以下是一个使用 jQuery 实现鼠标进入时高亮显示的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Hover Highlight</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        $(document).ready(function() {
            $('li').mouseenter(function() {
                $(this).addClass('highlight');
            }).mouseleave(function() {
                $(this).removeClass('highlight');
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：创建一个包含多个 <li> 元素的列表。
CSS 样式：定义一个 .highlight 类，用于设置高亮时的背景颜色。
jQuery 代码：
- 使用 $(document).ready() 确保 DOM 完全加载后再执行脚本。
- 使用 $('li').mouseenter() 绑定鼠标进入事件，当鼠标进入 <li> 元素时，添加 .highlight 类。
- 使用 $('li').mouseleave() 绑定鼠标离开事件，当鼠标离开 <li> 元素时，移除 .highlight 类。