Jquery -在mouseenter / mouseleave上的轻松转换

jQuery的mouseenter和mouseleave事件用于处理鼠标指针进入和离开元素时的交互。这两个事件与mouseover和mouseout类似，但它们不会在子元素之间冒泡，这使得它们的使用更为直观和简洁。

基础概念

mouseenter: 当鼠标指针进入某个元素时触发。
mouseleave: 当鼠标指针离开某个元素时触发。

优势

避免冒泡问题: 不会在子元素之间冒泡，减少了不必要的触发。
简化代码: 相比mouseover和mouseout，代码逻辑更清晰，易于维护。

类型

这两个事件都属于jQuery的事件系统，主要用于处理鼠标交互。

应用场景

悬停效果: 如显示提示信息、改变元素样式等。
动态菜单: 当鼠标进入某个区域时显示子菜单，离开时隐藏。

示例代码

以下是一个简单的示例，展示了如何使用mouseenter和mouseleave来改变元素的背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Mouse Events</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        $(document).ready(function() {
            $('#box').on('mouseenter', function() {
                $(this).css('background-color', 'red');
            });

            $('#box').on('mouseleave', function() {
                $(this).css('background-color', 'blue');
            });
        });
    </script>
</body>
</html>