HTMLビジュアルzOrderとマウスzOrder

Question

ビジュアルとマウスのイベントでzOrderを別々に動作させる方法について知っていますか？

私は、何かを強調するためにわずかに透明ですが、元の要素よりも:hoverのCSSスタイルを妨害しているzOrderの上位に配置している要素があります。

私は、<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オーダーの要素の残りの部分の上に、透明な緑の色で配置されています。 （1があった場合）

私はマウスがdiv#c1が同じ位置にもあり、上記の例では、A1を超えているので、それが:hover効果を受信したときにdiv#a1:hover CSSスタイルは、まだ効果を持っていると思います。私に<div>を不可視にするために[Iが必要】基礎となる要素（a1:hoverが発生する原因）

Answer 1

に「パススルー」異なるマウスzオーダーようにマウスイベントを有することdiv#c1したいと思いますマウス

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

pointer-events: noneを使用できます。

インターネット（Firefox、Safari）はInternet Explorer（Operaの場合はOpera）を除いて「どこでも」動作します。 pointer-eventsのためのブラウザのサポートが許容できない可能性が高い場合には

http://jsfiddle.net/QC5Yw/

は、JavaScriptを使用する必要があります。