title: How to make absolute positioned image area maps clickable with mouse?
body: <p>I have several images positioned on top of each other using absolute positioning. These images are partially transparent, and have a html <code>area</code> and <code>map</code> to make only the visible parts clickable. In jQuery, I have attached mouse events to the <code>area</code> tags.</p>
  
  <p>This works well for one image: mouseenter and mouseleave fire only when the mapped part of the image is entered.</p>
  
  <p>The problem is that it only works for the top image. For all others, it doesn't fire events not does CSS hover work, because there is another image on top of it. This despite the fact that the <code>area</code>s do not overlap and <code>map</code>s are in front of the images.</p>
  
  <p>Here is a demonstration of the problem: <a href="http://markv.nl/stack/imgmap2/" rel="nofollow">http://markv.nl/stack/imgmap2/</a></p>