HTML 视觉 zOrder 与鼠标 zOrder

Question

有人知道让 zOrder 以不同方式处理视觉事件和鼠标事件的方法吗？

我有一个 <div>我在 zOrder 中放置较高的元素，它稍微透明以突出显示某些内容，但它干扰了 :hover原始元素上的 css 样式。

我要么需要制作 <div>对鼠标不可见，或者它的鼠标 zOrder 不同于它的视觉 zOrder。这将采用 HTML 格式，从未听说过任何允许这样做的东西，还有其他人听到过吗？

我想我不确定为什么需要一个样本，但它应该是这样的:

<style>#a1:hover {  background-color: red;}#c1 {  position: absolute;   z-index: 10;   width: 100px;   height: 100px;   opacity: 0.3;   background-color: green;}</style><div id="a1">  <span id="b1">Sample</span></div>  <div id="c1">&nbsp;</div>

上面的示例可能只会使问题复杂化，但是 div#c1 以更高的 z 顺序位于其余元素之上，并具有透明的绿色。

我想要 div#a1:hover当鼠标悬停在 a1 上时，css 样式仍然有效，在上例中为 div#c1也处于相同位置，因此它收到 :hover效果(如果有的话)。我想要 div#c1具有不同的鼠标 z 顺序，以便鼠标事件“通过”它到底层元素(导致 a1:hover 发生)

Answer 1

[I need] to make the <div> invisible to the mouse

• > overlay on clickable region - CSS
• > How to make an element transparent to clicks but still visible?

You can use pointer-events:
none.

It works "everywhere" (Chrome, Firefox, Safari) except Internet Explorer (and Opera, if that matters).

http://jsfiddle.net/QC5Yw/

在可能的情况下，浏览器支持 pointer-events是 Not Acceptable ，您必须使用 JavaScript。