Deaktivieren der Weitergabe von CSS-Hovern, wenn verschachtelt

Question

Ich habe ein Containerelement, das irgendwo in seiner Struktur ein anderes Element enthält, dessen Sichtbarkeit umgeschaltet werden soll, wenn der Mauszeiger über das Containerelement bewegt wird. Dies funktioniert gut

.container .toggle { 
    visibility: hidden; 
} 

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

Problem ist, wenn ich Nest zwei Behälter mit getrennten .toggle Elementen beider Elemente sichtbar sind, wenn sie über die übergeordneten Container schweben. Die einfachste Lösung ist es, einen > in den :hover CSS-Selektor zu ändern. Das funktioniert gut, solange das Element .toggle ein direktes Kind des Elements .container ist.

In meinem Anwendungsfall kann ich nicht garantieren, dass dies der Fall ist, die Anzahl der Elemente zwischen dem .container und .toggle Element muss variabel sein.

Meine beste Vermutung war ein CSS die Wähler .container:hover *:not(.container) .toggle jedes Kind eines Behälters wählen versuchen, dass kein Kind eines anderen Behälters ist ... traurig, dass nicht funktioniert

Hier ist die Geige: http://www.w3schools.com/code/tryit.asp?filename=F0N00I8GETY0

Irgendwelche Hinweise gern gesehen, danke im Voraus :-)

Answer 1

arbeiten könnte, wenn Sie bereit sind, die maximale Verschachtelungstiefe festzulegen, können Sie dies wie folgt.

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>

drei Ebenen der Verschachtelung zu unterstützen, sollten Sie eine Regel benötigen wie

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

Answer 2

die einfachste Sache, die ich von ist denken kann, um die Sichtbarkeit der inneren .toggle Elemente hidden zu wechseln, wenn die .toggle Verput Eltern Makeln t.

.container .toggle { 
    visibility: hidden; 
} 

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

aber dann wieder dieser Code wird nicht erlauben Ihnen, die verschachtelte .toggle Elemente Sichtbarkeit zu wechseln, so dass Sie oben auf den Code hinzufügen:

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

aber dies funktioniert nur, wie vorgesehen, wenn Sie nur haben zwei verschachtelte .toggle Elemente. Und ich habe Angst zu sagen, wenn Sie mehr verschachtelte Elemente umschalten möchten, müssen Sie js verwenden.

Answer 3

Wenn Behälter immer in div ist, so etwas wie dieses

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