By clicking on the div placed above the image in IE

Question

I have an image that may have some divs above it (indicating specific choices in this image). These divs must be interactive. Something like that:

#divOuter { width: 500px; height: 500px; border: 2px solid #0000FF; position: relative; } #divInner { width: 100px; height: 100px; border: 2px solid #00FF00; position: absolute; cursor: pointer; top: 20px; left: 20px; } <div id="divOuter"> <img src="SomeImage.jpg" /> <div id="divInner"></div> </div> $("#divOuter").click(function() { alert("divOuter"); }); $("#divInner").click(function() { alert("divInner"); }); 

In chrome and FF, it works as expected (a pointer appears above the div, and clicking on it warns "divInner" and then "divOuter").
However, this did not happen in IE8 - I got the same behavior only when hovering / clicking on the inner borders of a div. When clicking inside this div, only "divOuter" was warned.
How can this be fixed?

Answer 1

Hack here: add CHAR as “O” to the inner div, and then give it a huge font size (depending on the area you want to overlap):

 #divInner { /* ... */; font-size: 1000px; color: transparent; } 

(I also believe that "overflow: hidden").

IE loves to have something in the container that can be affected. If it is just completely empty, it ignores clicks.

script: https://jsfiddle.net/cbnk8wrk/1/ (see in IE!)

Answer 2

I had the same problem with an unordered list, see Getting an unordered list before showing image slides in IE8, IE7, and possibly IE6

Solution: give the div a background color and make it transparent with a filter.

Answer 3

Adding a transparent gx background of 1x1 px to the div also works.

 #divInner { background: url(/images/transparent.gif); }