Elemento figlio di stile quando si passa il mouse sul genitore

Question

Come modificare lo stile dell'elemento figlio quando si passa il mouse sull'elemento padre. Preferirei una soluzione CSS per questo se possibile. C'è una soluzione possibile attraverso: hover CSS selettori. In realtà ho bisogno di cambiare il colore della barra delle opzioni all'interno di un pannello quando c'è un passaggio del mouse sul pannello.

Cerca di supportare tutti i principali browser.

Answer 1

Sì, puoi sicuramente farlo. Basta usare qualcosa come

.parent:hover .child { 
    /* ... */ 
} 

Secondo this page è supportato da tutti i principali browser.

Answer 2

Sì, è possibile utilizzare questo codice di seguito che potrebbe essere di aiuto.

.parentDiv{ 
 
margin : 25px; 
 

 
} 
 
.parentDiv span{ 
 
    display : block; 
 
    padding : 10px; 
 
    text-align : center; 
 
    border: 5px solid #000; 
 
    margin : 5px; 
 
} 
 

 
.parentDiv div{ 
 
padding:30px; 
 
border: 10px solid green; 
 
display : inline-block; 
 
align : cente; 
 
} 
 

 
.parentDiv:hover{ 
 
    cursor: pointer; 
 
} 
 

 
.parentDiv:hover .childDiv1{ 
 
border: 10px solid red; 
 
} 
 

 
.parentDiv:hover .childDiv2{ 
 
border: 10px solid yellow; 
 
} 
 
.parentDiv:hover .childDiv3{ 
 
border: 10px solid orange; 
 
}

<div class="parentDiv"> 
 
<span>Hover me to change Child Div colors</span> 
 
    <div class="childDiv1"> 
 
    First Div Child 
 
    </div> 
 
    <div class="childDiv2"> 
 
    Second Div Child 
 
    </div> 
 
    <div class="childDiv3"> 
 
    Third Div Child 
 
    </div> 
 
    <div class="childDiv4"> 
 
    Fourth Div Child 
 
    </div> 
 
</div>