Come usare puro CSS per controllare altri elementi sotto lo stesso genitore?

Question

Ecco il semplice esempio da codepen Codepen

Sto cercando di fare un paio di zona che appartengono allo stesso elemento genitore,
e quando mi passa il mouse uno di loro, l'opacità degli altri diminuirà, o qualcosa del genere altro stile che cambia.

Ad esempio, quando si passa il secondo elemento al passaggio del mouse, il primo elemento che ha lo stesso padre cambierà il suo background-color.

uso la parola zona al primo comma, significa che il bambino non deve veramente essere un div, potrebbe essere un li o un p o di altri elementi.
per risolvere questo problema, potrebbe essere qualsiasi tipo di elemento.

html assomiglia a questo:

<!-- html --> 
<div class="parent"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    <div class="four"></div> 
</div> 

ho cercato E ~ F regola per risolvere questo problema, e ho già noto che funzionerà solo al primo div, che è il primo figlio di genitore.

tranne javascript, esiste un altro modo per rendere questa funzionalità con puro css?
thx

Answer 1

Quando si passa il .parent, cambiare lo stile di tutti i bambini che non sono aleggiavano come pure (pen):

.parent { 
    width: 100px; /** limit the width of the parent, so you can't hover it, without hovering one of the children as well **/ 
    margin:10px; 

    &:hover > div:not(:hover) { /** only change the background of divs you don't hover as well **/ 
    background: red; 
    } 

    div{ 
    width:100px; 
    height:100px; 
    border:1px solid black; 
    } 
} 

Answer 2

a fare una applicando doppie stati hover:

.parent:hover div { 
 
    opacity:0.5; 
 
} 
 

 
.parent:hover div:hover { 
 
    opacity:1; 
 
} 
 

 
.parent div { 
 
    border:1px dashed #CCC; 
 
    padding:1em; 
 
    margin:1em; 
 
    background:#666; 
 
    color:#FFF; 
 
}

<div class="parent"> 
 
    <div class="one">One</div> 
 
    <div class="two">Two</div> 
 
    <div class="three">Three</div> 
 
    <div class="four">Four</div> 
 
</div>

Answer 3

In una nota correlata, ~ è per fratello generale successore (cioè l'elemento viene dopo questo, ma non necessariamente immediatamente dopo) ed è un selettore CSS3. + è per il prossimo fratello ed è CSS2.1.

Vedere Adjacent sibling combinator da Selectors Level 3 e 5.7 Adjacent sibling selectors da Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.