Invisible elements don't receive mouse events

I'm writing a swatch picker in jquery for a site that allows you to specify a colour for a seat cover. The picker consists of a grid of thumbnail images, when the user mouses over each of these thumbnails, a bigger image is shown over the top.

Now the thing is, the client wants the images that are partially or totally obscured by the overlying bigger image to still respond to events.

My solution to this problem was to add a preview element for showing the bigger picture to the list with a z-index of 5. Then I'd clone the original set of elements in the swatch list and overlay them as in开发者_Go百科visible elements with a z-index of 10. The result is that the partially obscured elements appear to still respond to mouse events, though in actuality the underlying elements don't have events attached. The events are actually attached to invisible elements in front of the preview element (I hope that makes sense!).

My first attempt to achieve this effect was for the cloned elements to get a visibility: hidden CSS style, but these don't respond to mouse events. I tried using empty elements with background: transparent instead, and this seemed to work fine, but testing in IE9 revealed that these elements don't respond to mouse events either!

I can get it to work if I remove the background:transparent style from the overlay elements, bot of course now they obscure everything underneath.

It only seems to be IE9 that has this issue so far. IE8 appeared to trigger the events on transparent items fine. It also seems to work as intended in FireFox and Chrome.

The solution in the end was annoyingly simple. All that was needed was to give the invisible elements the following styling:

background-color: white;
opacity: 0;
filter: alpha(opacity=0); /* for old IE versions */

This leaves the elements invisible, but still responsive to mouse events.

I would use a double binding technique for this, where the mouseover is bound to the behind image, and the out is bound to the front image. that allows you to have the front image hidden until the behind image is hovered.

// use $.fn.each so that each thumb gets its own timer.
$(".thumb-behind").each(function(){
  var timer;
  $(this).hover(function(){
    $(this).next().stop(true,true).fadeIn();
  },function(){
    timer = setTimeout(function(){
      $(this).next().stop(true,true).fadeOut();
    },10);
  });

  $(this).next().hover(function(){
    clearTimeout(timer);
  },function(){
    $(this).stop(true,true).fadeOut();
  });
});

just make sure you modify $(this).next() to select the larger thumbnail in relation to the current thumbnail.