html - disable propagation of css hover when nested -

i have container element somewhere in tree contains element, visibility should toggled when hovering on container element. works fine

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

problem is, when nest 2 containers separate .toggle elements both elements visible when hovering on parent container. easiest fix change add > :hover css selector. works fine long .toggle element direct child of .container element.

in use case cannot guarantee case, number of elements between .container , .toggle element must variable.

my best guess css selector .container:hover *:not(.container) .toggle trying select every child of container, not child of container... sadly not working

here's fiddle: http://www.w3schools.com/code/tryit.asp?filename=f0n00i8gety0

any hints welcome, thank in advance :-)

if willing stipulate maximum nesting level, can follows.

div { outline: red 1px solid; }    /* hide toggle elts default. */  .toggle { visibility: hidden; }    /* show toggle elts container hovered. */  .container:hover .toggle { visibility: visible; }    /* unless there 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>

to support 3 levels of nesting, you'd need rule such as

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