HTML Visual 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值的其余元素上，并带有透明的绿色。

当鼠标悬停在a1上时，我希望div#a1:hover css样式仍然有效，在上面的示例中，div#c1也处于相同的位置，因此它接收{{1效果（如果有的话）。我希望:hover有一个不同的鼠标z顺序，以便鼠标事件'通过'传递给底层元素（导致div#c1发生）

Answer 1

  

[我需要]使<div>对鼠标不可见

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

  

您可以使用pointer-events: none。

     

它“无处不在”（Chrome，   Firefox，Safari）除了Internet   Explorer（和Opera，如果重要的话）。

     

http://jsfiddle.net/QC5Yw/

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