jquery 当鼠标经过

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。当鼠标经过某个元素时，可以使用 jQuery 的 hover() 方法或者 mouseenter 和 mouseleave 事件来执行特定的操作。

基础概念

hover() 方法：这是一个便捷的方法，用于模拟鼠标悬停事件。它接受两个函数作为参数，第一个函数在鼠标进入元素时触发，第二个函数在鼠标离开元素时触发。
mouseenter 事件：当鼠标指针进入某个元素时触发。
mouseleave 事件：当鼠标指针离开某个元素时触发。

优势

简化代码：jQuery 提供了简洁的语法来处理复杂的 DOM 操作和事件绑定。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得开发者可以编写更少的兼容性代码。
丰富的插件生态：有大量的第三方插件可以使用，扩展了 jQuery 的功能。

类型

事件类型：mouseenter, mouseleave
方法类型：hover()

应用场景

导航菜单的高亮显示：当用户将鼠标悬停在导航菜单项上时，可以改变该项的背景色。
弹出提示框：鼠标悬停在某个元素上时，显示额外的信息或操作按钮。
图片预览：鼠标悬停在缩略图上时，显示大图的预览。

示例代码

以下是一个使用 jQuery 实现鼠标经过时改变元素背景色的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Hover Example</title>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #ddd;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('.box').hover(
        function() {
            // 鼠标进入时的操作
            $(this).css('background-color', '#ff0000');
        },
        function() {
            // 鼠标离开时的操作
            $(this).css('background-color', '#ddd');
        }
    );
});
</script>
</head>
<body>

<div class="box"></div>

</body>
</html>