ネストされたCSSホバーの伝播を無効にする

Question

ツリーのどこかに別の要素が含まれているコンテナ要素があります。その要素は、コンテナ要素の上に置かれたときに表示を切り替える必要があります。この作品罰金

.container .toggle { 
    visibility: hidden; 
} 

.container:hover .toggle { 
    visibility: visible; 
} 

問題は、親コンテナの上にマウスを移動するとき、別.toggle要素の両方の要素を持つI巣二つの容器が表示されているとき、あります。 最も簡単な修正は、>を:hover CSSセレクターに追加することです。 .toggle要素が.container要素の直接の子である限り、正常に動作します。

私はこの場合を保証することはできませんが、.containerと.toggle要素の間の要素の数を可変にする必要があります。

私の最高の推測では、コンテナのすべての子を選択しようとしているセレクタ.container:hover *:not(.container) .toggle が、それはまた別のコンテナの子ではないCSSた...悲しいことに、それは

が動作していないここでフィドルです：http://www.w3schools.com/code/tryit.asp?filename=F0N00I8GETY0

は、

任意のヒントは、歓迎

Answer 1

を仕事ができるあなたが最大ネストレベルを規定して喜んでいる場合は、次のようにこれを行うことができます。

div { outline: red 1px solid; } 
 

 
/* Hide toggle elts by default. */ 
 
.toggle { visibility: hidden; } 
 

 
/* Show toggle elts whose container is hovered. */ 
 
.container:hover .toggle { visibility: visible; } 
 

 
/* Unless there is a non-hovered container in between! */ 
 
.container:hover .container:not(:hover) .toggle { visibility: hidden; }

<div class="container"> 
 
    OUTSIDE CONTAINER 
 
    <div class="toggle">OUTSIDE TOGGLE</div> 
 
    <div class="container"> 
 
    INSIDE CONTAINER 
 
    <div class="toggle">INSIDE TOGGLE</div> 
 
</div>

のネストには3つのレベルをサポートするために、あなたは、このような

.container:hover .container:hover .container:not(:hover) .toggle { visibility: hidden; } 

Answer 2

私は考えることができる最も簡単な方法は、親.toggle elemenを切り替えるときhiddenにインナー.toggle要素の表示を切り替えることです:-)事前にあなたに感謝しますt。

.container .toggle { 
    visibility: hidden; 
} 

.container:hover .toggle { 
    visibility: visible; 
} 
.container:hover .toggle .toggle { 
    visibility: hidden; 
} 

しかし、その後、再びこのコードは文句を言わないあなたは上記のコードに追加する必要がありますので、あなたは、ネストされた.toggle要素の可視性を切り替えることができるように：あなたが唯一持っている時に意図したとおりに

.toggle:hover .toggle { 
    visibility: visible; 
} 

が、これだけ作品2つのネストされた.toggle要素。そして、あなたがjsを使うために必要なより多くの入れ子になった要素を切り替えることを望むなら、私は恐れると思います。

Answer 3

コンテナはdivの中に常にある場合は、このようなものは

.container:hover div:not(.container) .toggle, .container .container:hover .toggle, .container:hover > .toggle { 
visibility: visible; 
}