Take the 2-minute tour ×

I think I asked about the opposite problem a while ago (allow mouse event to pass through a transparent area on an image - I ended up using an imagemap for that) but anyway:

I need a mask element for when a dialog comes up. In the past I've used:


And it works, but it's kind of a "hack".

I've not been able to get an element with background:transparent to intercept mouse events. Is this intentional? Is there any way around this other than the above? Or is the above the best solution for this problem?

share|improve this question
A jsfiddle demo showing background:transparent not working would be helpful. It seemed to work fine either way in the limited testing I did in FF and IE. –  Matt Coughlin Dec 9 '12 at 23:12
link - you should not be able to click on the button, but you can. –  Niet the Dark Absol Dec 9 '12 at 23:30
I see the problem now. –  Matt Coughlin Dec 10 '12 at 0:13
add comment

1 Answer

up vote 0 down vote accepted

The issue with background:transparent appears to be specific to IE (tested in IE7/8/9). It's not an issue in other browsers.

It's also specific to HTML form elements. For instance, it works fine in IE for text inside a paragraph tag but not for a button tag. Most likely it's a rendering bug in IE, rather than the result of a deliberate engineering decision by Microsoft. There used to be a similar issue in IE6 with select boxes not layering correctly with position:absolute.

It'd be safer to use opacity than background:transparent in this case. It may feel less like a hack if you change the opacity of the mask to make it partially transparent instead of fully transparent.

share|improve this answer
add comment

Your Answer


