jquery鼠标悬停

jQuery鼠标悬停事件基础

jQuery提供了.hover()方法来处理鼠标悬停（hover）事件。该方法接受两个函数参数，分别对应鼠标进入和离开元素时的动作。

$(selector).hover(
  function() {
    // 鼠标进入时执行
  },
  function() {
    // 鼠标离开时执行
  }
);

简化语法

如果进入和离开时的动作相同，可以只传递一个函数：

$(selector).hover(function() {
  // 鼠标进入和离开都会执行
});

替代方法

也可以使用.mouseenter()和.mouseleave()分别处理：

$(selector).mouseenter(function() {
  // 鼠标进入
});

$(selector).mouseleave(function() {
  // 鼠标离开
});

实际应用示例

改变元素背景色：

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

事件委托

对动态添加的元素使用事件委托：

$(document).on("mouseenter", ".dynamic-element", function() {
  // 处理鼠标进入
});

$(document).on("mouseleave", ".dynamic-element", function() {
  // 处理鼠标离开
});

注意事项

• 避免在悬停事件中执行耗时操作，以免影响用户体验
• 对于移动设备，悬停效果可能表现不同，需要额外测试
• 复杂的动画效果建议使用CSS的:hover伪类实现，性能更优