Stile elemento figlio quando passa con il mouse sul genitore

155

Come modificare lo stile dell'elemento figlio in caso di passaggio del mouse sull'elemento padre. Preferirei una soluzione CSS per questo, se possibile. Esiste una soluzione possibile attraverso: hover selettori CSS. 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.

Cercando di supportare tutti i principali browser.

css css-selectors

— Rajat Gupta
fonte

273

Sì, puoi sicuramente farlo. Usa qualcosa del genere

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

Secondo questa pagina è supportato da tutti i principali browser.

— jtbandes
fonte

8

Grazie, mi hai appena aiutato a dare vita alla mia pagina web con CSS3.

— Nick Taras,

1

Finalmente ho imparato abbastanza CSS per sapere cosa chiedere, grazie per l'aiuto! Nota che questo vale per tutti i discendenti, se vuoi solo figli penso di aver bisogno .parent:hover > .child?

— William T. Mallard,

8

Sì, puoi farlo utilizzando questo codice di seguito che può aiutarti.

.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>

Espandi frammento

— Iqbal Pasha
fonte

10

Così tardi per la festa

— Dherya,

4

Questa risposta trarrebbe beneficio da alcune spiegazioni. Mi sembra che qui ci sia più codice di quello che deve esserci e non è chiaro a quale parte del codice dovremmo concentrarci.

— Paul Rooney,