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

Question

我需要这个小提琴解决了.

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

说实话,我不知道从哪里开始解决这种情况.我希望有一个CSS解决方案,允许通过具有背景的元素传播事件.我怀疑存在.

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

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

请注意,我需要在所有现代浏览器中使用它.

Answer 1

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

jsFiddle例子

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

请注意,指针事件在IE9下不起作用.