How to create a "Glass pane" in Javascript?

Question

I’m trying to create a "Glass malfunction" in Javascript, similar to supported by Java. The goal is to offer a kind of interactive help to the user, where information about each element is superimposed on the screen, and all the elements except the one being explained is disabled.

Creating the Glass pane is easy - just a fixed element occupying the whole screen. Disable all elements except one can be done through the properties disabled and readonly, or intercepting events in the capture phase. The problem is making the Glass fail not block the elements that are "behind" him.

For a demonstration of the problem, see this example in jsFiddle - all elements work normally, until the "Help" link is clicked; from there, everything that is "behind the Glass pane" stops working, since the mouse and keyboard events will all stop in the Glass pane. I would like Glass to "let" events pass to what is behind it, just as the Java version allows.

Note: Preferably this should occur regardless of your degree of transference, or even whether or not you have things drawn on it (I would like to put arrows and things like that).

Workaround

Do not use a Glass pane, but individual elements that do not lock the element in focus. Example. While not the ideal solution, this and more conditional content stylization could result in more or less what I want - only in a much more laborious way...

Answer 1

This can be done via CSS:

#glasspane{
    pointer-events:none;
}

This property disables any mouse event in the element in question, which causes the element just below where you clicked to receive the events.

Example: FIDDLE

The problem is IE compatibility, since only version 11+ accepts this property.

Support on other browsers is unanimous:

Chrome | FF | Safari 7+ | iOS 3.2+ | Android 2.1+ ^{via Caniuse}