悬停时仅显示一个叠加层

【问题标题】：Show only one overlay on hover悬停时仅显示一个叠加层
【发布时间】：2014-10-10 16:49:03
【问题描述】：

我的 jQuery 代码有问题，不是让覆盖出现在悬停时，而是在我悬停在一个上时出现。我做了一个JS Bin：http://jsbin.com/fukuw/8/ 如果您将鼠标悬停在图像上，所有的叠加层都会出现，但您将鼠标悬停在上面的那个会出现。另外，我怎样才能使该代码适用于触摸用户？

【问题讨论】：

我还在学习 jquery，但我认为你需要使用$(this) 来只影响你正在与之交互的人。

标签： javascript jquery jquery-on

【解决方案1】：

问题是您没有告诉正确的元素进行动画处理 - 您必须使用 this 并找到属于您悬停的元素的叠加层...

 SaveElement.on("mouseover", function () {
    $(this).find(".overlay").animate({ opacity: 1, top: "3px" }, 150);
  });

  SaveElement.on("mouseleave", function () {
     $(this).find(".overlay").animate({ opacity: 0, top: "-23px" }, 150);
  });
});

http://jsbin.com/wuribezonoji/1

【讨论】：

非常感谢。这肯定会有所帮助！