Estilo do elemento filho ao passar o mouse sobre o pai

155

Como alterar o estilo do elemento filho quando há pairar no elemento pai. Eu preferiria uma solução CSS para isso, se possível. Existe alguma solução possível através de: passe o mouse nos seletores CSS. Na verdade, preciso alterar a cor da barra de opções dentro de um painel quando houver um cursor no painel.

Procurando suporte para todos os principais navegadores.

css css-selectors Rajat Gupta
fonte

Respostas:

273

Sim, você pode definitivamente fazer isso. Basta usar algo como

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

De acordo com esta página , é suportado por todos os principais navegadores.

jtbandes
fonte
8
Obrigado, você acabou de me ajudar a dar vida à minha página da Web com CSS3.
Nick Taras
1
Finalmente aprendi CSS suficiente para saber o que pedir, obrigado pela ajuda! Observe que isso se aplica a todos os descendentes, se você apenas quer filhos, acho que precisa .parent:hover > .child?
William T. Mallard
8

Sim, você pode fazer isso. Use o código abaixo para ajudá-lo. 

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

Iqbal Pasha
fonte
10
Tão tarde para a festa
Dherya
4
Esta resposta se beneficiaria de alguma explicação. Parece-me que há mais código aqui do que precisa e não está claro em que parte do código devemos nos concentrar.
Paul Rooney