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

Question

我需要解决这个小提琴。

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

老实说，我不知道从哪里开始解决这种情况。我希望有一个 CSS 解决方案可以让事件通过具有背景的元素传播。我怀疑它的存在。

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

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

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

Answer 1

我知道能够访问该链接的一种方法是将#cursor-blockdiv 上的指针事件设置为无。

jsFiddle 示例

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

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