2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Stephen Watkins
  • 25,047
  • 15
  • 66
  • 100
  • 1
    lol, Firefox 15 has a bug that causes the element underneath to occasionally flicker (i.e. become `:hover`) when you move the cursor over it. In fact, if you move your cursor very rapidly you can cause it to flicker even more. – BoltClock Sep 28 '12 at 17:00
  • 2
    Generally it'd be considered an awful bug if you *could* interact with covered-up elements. That's a much-used browser behavior for things like modal dialogs. – Pointy Sep 28 '12 at 17:01
  • @Pointy That's true. Obviously, this is an edge case. – Stephen Watkins Sep 28 '12 at 17:16
  • Forgot about the "pointer-events" trick however :-) – Pointy Sep 28 '12 at 17:20

1 Answers1

6

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • +1 This is _exactly_ the functionality I'm looking for. It's unfortunate it doesn't work in IE9. And, I just updated my question to reflect that I would need a solution to work in all modern browsers. Sorry for forgetting to mention that previously. Still good answer. – Stephen Watkins Sep 28 '12 at 17:15
  • 1
    According to this, http://caniuse.com/#search=pointer, it doesn't look like it works on IE9? – Stephen Watkins Sep 28 '12 at 17:20
  • Sign, yup that's right. Not even IE9 can handle it. It can handle the SVG features of the pointer-events though. – j08691 Sep 28 '12 at 17:22
  • Found two questions on SO that address the IE issue: http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie http://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone – Stephen Watkins Sep 28 '12 at 17:28