Question

I have an image which may have some divs over it (specifying certain selections within that image). These divs are supposed to be clickable. 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 (pointer appears over the div, and clicking it alerts “divInner” and then “divOuter”).
However, in IE8 it didn’t – I got the same behavior only when hovering/clicking on the inner div borders. When clicking inside that div, only “divOuter” was alerted.
How can this be fixed?

Answer 1

Here’s a hack: add an CHAR like “O” to the inner div, and then give it an enormous font size(depends on the area you want to span over):

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

(Also set “overflow: hidden” I think.)

IE likes there to be something there in the container for the click to affect. If it’s just completely empty, it ignores clicks.

a fiddle: https://jsfiddle.net/cbnk8wrk/1/ (watch in IE!)