javascript - 悬停时仅显示一个叠加层

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