See description of the problem with all code:
SUMMARY: (basicaly making an imagemap)
- I have a div relatively positioned (i will call this the containter :) ), containing 1 image and a couple of div tags with their own image.
- The image directly under the container is the background image.
- The div under the container are absolutely positioned to be over the background image, the width and height is set to allow to call capture a "hover".
- The images under those divs are hidden at the start (the image dimensions are used for the width and height of their respective divs).
- When a hover occurs one one of those divs, the image it contains becomes visible)
==> the positioning and hiding showing is all done via jquery, see the pastebin link on top of the post for detailed information.
This works fine in chrome and firefox, but when tested on IE9, the hover doesn't work. I have tried playing with the z-index of the divs, but at no avail. Can somebody shed some light on this issue ?
See description of the problem with all code:
Thx!
Edit: Created a jsfiddle from the provided code: