javascript - 如何与具有背景的 HTML 元素下的 DOM 元素交互？

Question

I need this fiddle solved.

我无法与另一个具有背景的 HTML 元素下的 DOM 元素交互。这是 HTML/CSS 101。但是，背景与 rgba 和不透明度 CSS 属性相结合，这并不总是理想的效果。就像我的情况一样，我需要一个元素的背景始终位于所有其他元素之上。

老实说，我不知道从哪里开始解决这个问题。我希望有一个 CSS 解决方案，允许事件通过具有背景的元素传播。我怀疑它是否存在。

我的另一个想法是使用 JavaScript 解决方案以某种方式强制捕获下面元素的事件，就好像上面的元素根本不存在一样。

如何与具有背景的 HTML 元素下的 DOM 元素交互？

请注意，我需要它在所有现代浏览器中工作。

Answer 1

我知道能够访问链接的一种方法是在 #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;
}

请注意，指针事件在 IE9 以下不起作用。