How to enable div stacked over allow bubbling from below?

Question

I have a divBelow that has various anchors... I have a divOver with a higher z-index and transparency. However, because I placed div over div, all those anchors from the div below are not clickable anymore. I tried with other solutions, such as assigning divBelow pseudo :after transparency:

#divBelow:after {
 content:'';
 position: absolute;
 top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(255, 255, 255, 0.5);
}

but it didn't show any transparency, so I used a divOver with higher z-index, but functionality is gone. I tried assigning divOver this:

 $('#divOver').click(function(e) {
    e.bubbles = true;
 });

but it also didn't work.

What is the simplest solution? Thanks

Answer 1

Try with:

.over-element {
    pointer-events: none;
}

in your CSS, this is the easy solution, but sadly it has bad browser support http://caniuse.com/#search=pointer-events .

But I remember coming across a fix for ie, I think it was this one: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

I'm afraid making that work consistently across browser is trickier than you originally thought