CSS cursor property to propagate through div

Question

Is it possible to have the CSS cursor property of a div propagate through a transparent div that overlays it?

Let me illustrate with a mock-up: https://jsfiddle.net/azL1ot2d/

With the following HTML code:

<div id="page">
    <div id="clickable">Click me!</div>
    <div id="glasspane">
        <div id="other">Some glass-pane content</div>
    </div>
</div>

And the following CSS code (reduced to the important parts):

#page {
    position: absolute;
    width: 100%;
    height: 100%;
}

#clickable {
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: orange;
    cursor: pointer;
}

#glasspane {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

#other {
    ...
}

Notice how I set the cursor property on the clickable div, but the div is entirely covered by the glasspane div (which I use for effects, dialogs, ...). Is it possible to have the mouse-cursor change to the link-pointer if it hovers above the clickable-div even though the div is covered? In other words: Can I make the glasspane transparent to cursor settings? (I'd prefer not to use JavaScript for this)

Answer 1

Yes you can but there is no IE support, there you go : JSFiddle The trick is to use pointer-events: none; on the top layer :)

#glasspane {
    pointer-events: none;    
}