Question

I have a div that has a graddient image and that is above another one that contains a lot of images…

The problem is that I want to detect when the users hover one of these images, because if that happens, I want to bring the hovered image to the front.

By the way, the div behind could have a lot of images (like 60).

How can I do this?

Answer 1

I think if the foreground gradient div has no hover listeners attached, listeners attached to each image behind it should still work. Then, on hover, you could increase the z-order to bring it in front, something like:

$(".imgdiv").hover(function() {
  $(this).attr('z-index', 102);  // mouse enter
}, function() {
  $(this).attr('z-index', 100);  // mouse exit
});

this would be assuming the gradient div has z-index of 101.