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, I cannot click any of the links in the ".container" area since I'm technically clicking ontop of the shadow.

Is there a way to pass events through this div layer and be able to click links in the "container" div?

<div class="bottom-wrap">
    <div class="shadow"></div>
    <div class="bottom">
      <a href="http://www.google.com" class="#topButton">Click</a>
    </div>
</div>

<div class="container">
    // a bunch of content here
</div>

I've created this jsFiddle http://jsfiddle.net/aY2Ld/ which should help understand my problem.

Answer 1

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/