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.