Question

当您将鼠标悬停在图像上方时，我会在图像上方滑动一个简单的滑动框以显示一些信息。这工作正常，但我在同一页面上有多个图像，所以当你将鼠标悬停在任何图像上时，所有的框都会向上滑动。

是否有一种简单的方法可以对此进行排序，只有悬停在上方的图像会向上滑动？或者它基本上是为每个图像缩略图创建相同的代码，说明不同的ID？

继承jquery - 随意更正此片段中的任何错误，因为我对它很陌生

$('#gallery-inner .thumb .gallery-inner-thumb').hide(); 
$("#gallery-inner .thumb").hover(function () {
    $("#gallery-inner .thumb .gallery-inner-thumb").show().animate({margin:'-36px 0 0'},'fast');
    }, function () { 
    $("#gallery-inner .thumb .gallery-inner-thumb").animate({margin:'1px 0 0'},'fast');
});

并且是html块。

<div class="thumb clearfix">
    <div class="image">
        <a href="#" title="#"><img src="images/simg/pimg.jpg" alt="#"></a>

        <div class="gallery-inner-thumb clearfix">
            <div class="name"><a href="#">Image Name</a></div>
            <div class="comments"><a href="#">0</a></div>
        </div>

    </div>
</div>

由于

Answer 1

jQuery将目标元素作为this传递给事件处理程序。因此，您可以执行以下操作：

$("#gallery-inner .thumb").hover(function() // mouse over target
   {
      // select child of target .thumb with class .gallery-inner-thumb
      $(".gallery-inner-thumb", this)  
         .show().animate({margin:'-36px 0 0'},'fast');
   }, 
   function() // mouse off of target
   { 
      // select child of target .thumb with class .gallery-inner-thumb
      $(".gallery-inner-thumb", this)
      .animate({margin:'1px 0 0'},'fast');
   });

...它将分别适用于每个缩略图。这里的关键是在选择要显示/动画的子项时为jQuery函数指定上下文（this - 事件目标）。

jquery - 多个类操作

1 个答案: