jquery移入移出

jQuery移入移出事件方法

jQuery提供了多种方法处理元素的鼠标移入（hover）和移出（mouseout）事件，以下是常用的实现方式：

hover()方法

hover()是jQuery中专门为移入移出设计的方法，接受两个函数参数：

$(selector).hover(
  function() {
    // 鼠标移入时执行的代码
  },
  function() {
    // 鼠标移出时执行的代码
  }
);

示例：

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

mouseenter()和mouseleave()

这两个方法分别对应纯粹的移入和移出事件：

$(selector).mouseenter(function() {
  // 移入动作
});

$(selector).mouseleave(function() {
  // 移出动作
});

事件委托版本

对于动态生成的元素，使用事件委托：

$(document).on({
  mouseenter: function() {
    // 移入处理
  },
  mouseleave: function() {
    // 移出处理
  }
}, "selector");

注意事项

• hover()内部实际是mouseenter和mouseleave的封装
• 传统mouseover/mouseout会冒泡，可能引发意外触发
• 动画效果建议配合stop()防止动画队列堆积：

  $(".item").hover(function() {
    $(this).stop().fadeTo(200, 0.5);
  }, function() {
    $(this).stop().fadeTo(200, 1);
  });

高级用法

可以结合CSS类切换实现更复杂效果：

$(".card").hover(
  function() { $(this).addClass("hover-active"); },
  function() { $(this).removeClass("hover-active"); }
);