Question

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:

position:fixed;
left:0;top:0;right:0;bottom:0;
background:#000000;
opacity:0;
filter:alpha(opacity=0);

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?

Answer 1

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.