Pass click events through a DOM layer

Question

I have a div that is positioned to the bottom of the page and sits above everything on the page. I include a shadow to remove the harsh cutoff of the content below. However,

Answer 1

You should implement your own event chain.

For example:

$('.shadow').click(function() {
    $('.under-shadow').trigger('click');
});

Althought it would work, I wouldn't recommend the use of pointer-events:none; since it isn't well supported.

Answer 2

Try setting the pointer-events to none; for the overlaying div. See this page for an example: http://css-tricks.com/almanac/properties/p/pointer-events/

Answer 3

you can add

pointer-events:none;

to your .bottom-wrap class in your CSS

http://jsfiddle.net/aY2Ld/1/

EDIT : you'll also need to add pointer-events:fill; to the .bottom class

Updated Fiddle: http://jsfiddle.net/aY2Ld/4/

Answer 4

If browser support is not a probleme fore you, you can use the CSS properties pointer-events

.bottom-wrap {
    pointer-events:none;
}

But to make the content inside active, you need to reset it like that :

.bottom-wrap .bottom {
    pointer-events:auto;
}

Fiddle : http://jsfiddle.net/aY2Ld/5/