jquery鼠标移入移出

jQuery鼠标移入移出事件

jQuery提供了mouseenter、mouseleave、mouseover和mouseout等方法来实现鼠标移入移出的交互效果。以下是具体用法和区别：

基本语法

// 鼠标移入事件
$(selector).mouseenter(function(){
    // 移入时执行的代码
});

// 鼠标移出事件
$(selector).mouseleave(function(){
    // 移出时执行的代码
});

事件区别

• mouseenter和mouseleave：只在鼠标进入或离开选定元素时触发，不会冒泡。
• mouseover和mouseout：会在鼠标进入或离开选定元素及其子元素时触发，会冒泡。

实际应用示例

$("#box").mouseenter(function(){
    $(this).css("background-color", "yellow");
});

$("#box").mouseleave(function(){
    $(this).css("background-color", "white");
});

复合事件

可以使用hover()方法同时绑定移入和移出事件：

$("#box").hover(
    function(){
        // 移入时执行
        $(this).css("background-color", "yellow");
    },
    function(){
        // 移出时执行
        $(this).css("background-color", "white");
    }
);

注意事项

1. 使用mouseenter和mouseleave性能更好，适合大多数场景。
2. 如果需要事件冒泡，才使用mouseover和mouseout。
3. 现代jQuery版本推荐使用on()方法绑定事件：

   $("#box").on("mouseenter", function(){
    $(this).css("background-color", "yellow");
   });

这些方法可以创建各种交互效果，如菜单下拉、图片切换、提示框显示等。