jQuery实现鼠标悬停仅触发当前.slider元素的slideUp/slideDown效果

你当前代码的逻辑偏差来自两个点：

• 事件绑定范围过宽：把两组「图片+滑块」全部包裹在同一个大 .container 容器内，给这个大容器绑定 mouseenter/mouseleave 会导致整个区域任意位置的移入移出都会触发全局逻辑
• 动画选择器未限定查找范围：触发事件时直接用全局选择器 $(".slider")，会选中页面上所有带该类的元素，没有和当前鼠标位置关联

根据你想要的悬停触发范围，二选一实现即可：

方案1：最小改动，不调整现有DOM结构 #

你的现有HTML里，每个 .image 元素后面紧跟着对应的 .slider 元素，不需要调整DOM，直接把事件绑定到单个 .image 上，通过当前触发元素定位对应滑块：

// 事件委托写法，兼容后续动态新增的image元素
$(document)
  .on("mouseenter", ".image", function() {
    // $(this) 指向当前鼠标移入的image元素，仅查找它相邻的下一个slider
    $(this).next(".slider").stop(true, true).slideDown(400);
  })
  .on("mouseleave", ".image", function() {
    $(this).next(".slider").stop(true, true).slideUp(400);
  });

说明：新增的 stop(true, true) 方法会清空之前的动画队列，避免鼠标快速反复移入移出时出现动画卡顿、不同步的问题。

方案2：拆分DOM为独立触发单元 #

如果希望鼠标移入「图片+滑块」的整个区域时，滑块保持展开，移出整个区域才收起，就把原来的大 .container 拆成两个独立的容器，每组图片和滑块对应一个 .container，HTML调整为：

<div class="container">
  <div class="image"></div>
  <div class="slider">
    <div class="title">Title</div>
    <div class="text">Text</div>
  </div>
</div>
<br/>
<div class="container">
  <div class="image"></div>
  <div class="slider">
    <div class="title">Title</div>
    <div class="text">Text</div>
  </div>
</div>

对应的jQuery代码调整为，只在当前触发事件的容器范围内查找滑块元素：

$('.container')
  .on("mouseenter", function() {
    // 仅查找当前触发事件的container内部的slider
    $(this).find(".slider").stop(true, true).slideDown(400);
  })
  .on("mouseleave", function() {
    $(this).find(".slider").stop(true, true).slideUp(400);
  });

两种方案实现后，鼠标移入哪个图片区域，只有对应的那个滑块会展开；移出对应区域时，也只有对应的滑块会收起，不会影响其他位置的滑块元素。

内容的提问来源于stack exchange，提问作者user_1330