悬停时只显示一个叠加层

Question

我的jQuery代码出现问题，而不是在悬停时显示叠加层，当我将鼠标悬停在其中时，所有这些都会出现。 我做了一个JS Bin：http://jsbin.com/fukuw/8/ 如果您将鼠标悬停在图像上，则会显示所有叠加层，但是您想要的是用于悬停在其上的那个叠加层。 另外，我如何使该代码适用于触控用户？

Answer 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