当前位置：首页 > jquery

jquery鼠标悬停事件

2026-03-17 03:12:39jquery

jQuery鼠标悬停事件基础用法

鼠标悬停事件在jQuery中主要通过.hover()方法实现，该方法接受两个函数参数，分别对应鼠标进入和离开时的处理逻辑。

$("#targetElement").hover(
  function() {
    // 鼠标进入时执行
    $(this).css("background-color", "yellow");
  },
  function() {
    // 鼠标离开时执行
    $(this).css("background-color", "");
  }
);

简化版悬停效果

如果只需要在悬停时触发单一效果（不考虑离开状态），可以直接使用.mouseenter()和.mouseleave()方法：

jquery鼠标悬停事件

$("#element").mouseenter(function(){
  $(this).addClass("hover-style");
});

$("#element").mouseleave(function(){
  $(this).removeClass("hover-style");
});

结合CSS实现悬停动画

通过jQuery触发CSS过渡动画，实现更流畅的悬停效果：

$(".card").hover(
  function() {
    $(this).stop().animate({ opacity: 0.8 }, 200);
  },
  function() {
    $(this).stop().animate({ opacity: 1 }, 200);
  }
);

事件委托处理动态元素

对于动态生成的元素，使用事件委托确保悬停事件有效：

jquery鼠标悬停事件

$(document).on({
  mouseenter: function() {
    $(this).find(".tooltip").show();
  },
  mouseleave: function() {
    $(this).find(".tooltip").hide();
  }
}, ".dynamic-item");

高级悬停延迟处理

添加延迟效果避免频繁触发：

var hoverTimer;
$("#menu-item").hover(
  function() {
    hoverTimer = setTimeout(function(){
      $("#submenu").slideDown(300);
    }, 200);
  },
  function() {
    clearTimeout(hoverTimer);
    $("#submenu").slideUp(200);
  }
);

移动端兼容处理

针对触摸设备添加touchstart事件模拟悬停：

$(".touch-element").on("touchstart", function() {
  $(this).addClass("hover-state");
}).on("touchend", function() {
  $(this).removeClass("hover-state");
});