CSS - ホバーは要素を通過して、覆われた要素上のホバーをアクティブにします。

Question

私は位置の絶対とz-インデクシングの多くを含むページレイアウトを持っているので、互いに重なっている要素がたくさんあります。

要素の1つにはテキストが含まれており、他の多くの要素の上に置かれています。

この要素の下には、CSSホバー疑似クラスが適用されている要素がいくつかあります。

テキストを含む要素をマウスが通過すると、マウスの存在に応答して擬似クラススタイルをアクティブにするために、下の要素を何とかしたいと思います。

要素のスタイルを設定する方法はありますか。それによって、その要素を下にある任意の要素に渡すことができます。

これはJavaScriptではあまり難しくありませんが、できるだけシンプルなものにするために、現時点でそのルートに行くのではないでしょう。後でJavaScriptで十分に複雑になるでしょう。

ありがとう

P.S. - 私は既にHTML5とCSS3を使用しているので、これらの新しい標準を利用したソリューションには問題ありません。

Answer 1

あなたは上の要素にpointer-events: none;を使用することができます：あなたは要素の後ろにアクティブになる上に要素を置くと

は、

あなたが見ることができるようにhttp://jsfiddle.net/7aeDt/を参照してください。 https://developer.mozilla.org/en/CSS/pointer-events

例：このプロパティの詳細情報については

<div> on top of all: hover me </div> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 

CSS

div { 
    width : 200px; 
    height : 200px; 
    float : left; 
    cursor : pointer; 
    border : 1px green solid; 
} 

div + div:hover { background: #a1a6c8; } 

div:first-child { 
    pointer-events : none; 
    position  : absolute; 
    top   : 100px; 
    left   : 100px; 
    border   : 1px green solid; 
    background  : #c1c6c8; 
} 

Answer 2

はまた、人々が役に立つかもしれません何かが子供にあなたが再度有効にできることをポインタイベントですpointer-eventsの要素：none要素をポインタイベントに設定することによって：autoを明示的に指定します。これは十分に文書化されておらず、非常に有用であることが判明している。 - slicedtoad

@ slicedtoadのコメントは私にとって非常に便利だったので、完全な答えが必要だと思います。 pointer-events: noneを親に設定すると、その子のイベントは無効になります。ただし、子供にpoint-events: autoと設定すると、再び動作します。

これは、子が負の値z-indexを持ち、ポインタイベントに応答しなくなった場合にも機能します。