Question

I need this fiddle solved.

I am unable to interact with DOM elements underneath another HTML element that has a background. This is HTML/CSS 101. However, with backgrounds in combination with rgba and opacity CSS properties, this won’t always be the desired effect. Like in my case, I need the background of an element to always be on top of all other elements.

To be honest, I don’t know where to begin solving this situation. I’m hoping there is a CSS solution that will allow event propagation through elements with backgrounds. I’m doubting that exists.

My other thought is to use a JavaScript solution to somehow force capturing of events to the elements below to act as though the element on top doesn’t even exist.

How can I interact with DOM elements under an HTML element that has a background?

Note that I would need this to work in all modern browsers.

Answer 1

One way I know of to be able to access the link would be to set the pointer-events to none on the #cursor-block div.

jsFiddle example

#cursor-block {
    background: rgba(0, 0, 0, .075);
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15px;
    z-index: 2;
    pointer-events: none;
}

Note that pointer-events doesn’t work below IE9.