Search code examples
javascriptjqueryjquery-on

Show only one overlay on hover

I'm having trouble with my jQuery code, instead of having the overlay appear on hover, all of them appear when I hover over one. I have made a JS Bin: http://jsbin.com/fukuw/8/ If you hover over the images, all the overlays appear but what's intended is for the one that you are hovering over to appear. Also how can I make that code work for touch users?

Solution

  • the problem is you are not telling the correct element to animate - you have to use this and find the overlay that belongs to the element you're hovering over ...

     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