jquery – 多个类操作

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

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

inheritance人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'); }); 

并且inheritance了html块。

 
 
  
 
Image Name
 
0
 
 
  

谢谢

Answer 1

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

 $("#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 – 事件目标）。