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

Question

I need this fiddle solved.

我无法与另一个具有背景的HTML元素下的DOM元素进行交互。这是HTML / CSS 101.但是，将背景与rgba和opacity 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下不起作用。