Click through div with an alpha channel

Question

I\'m trying to replicate twitter\'s \"fade out\" layer at the bottom of the feed widget (on their main page at twitter.com).

The only way I could come up with that didn\

Answer 1

For IE, just set the bottom div or layer to use a negative index, like this:

{pointer-events: none; z-index: -100}

Answer 2

This article describes one method of capturing the onclick event, and handling it by momentarily hiding the overlay, refiring the click, then unhiding it again. The hiding shouldn't be visible to the end user.

Forwarding Mouse Events Through Layers :

1. The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.
2. The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.
3. The event is re-fired - this is where the W3 DOM Event model and the simpler Microsoft equivalent come into play.
4. Start the process again - ready for the next event.

EDIT: I think what Twitter does is actually much simpler. There's a CSS property borrowed from SVG that a bunch of browsers have implemented.

.overlay { pointer-events: none; }

This is currently supported in Firefox 3.6+, Safari 4 and Google Chrome - so if you're happy for it to only work on these browsers then this is a much simpler option, with the added advantage that it works for hover events too, not just click events.