Élément enfant de style lorsque vous passez la souris sur le parent

155

Comment changer le style de l'élément enfant en cas de survol de l'élément parent. Je préférerais une solution CSS pour cela si possible. Existe-t-il une solution possible grâce à: survolez les sélecteurs CSS. En fait, je dois changer la couleur de la barre d'options à l'intérieur d'un panneau lorsqu'il y a un survol sur le panneau.

Vous cherchez à prendre en charge tous les principaux navigateurs.

css css-selectors Rajat Gupta
la source

Réponses:

274

Oui, vous pouvez certainement le faire. Utilisez simplement quelque chose comme

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

Selon cette page, il est pris en charge par tous les principaux navigateurs.

jtbandes
la source
8
Merci, vous venez de m'aider à donner vie à ma page Web avec CSS3.
Nick Taras
1
Enfin appris assez de CSS pour savoir quoi demander, merci pour l'aide! Notez que cela s'applique à tous les descendants, si vous voulez juste des enfants dont je pense que vous avez besoin .parent:hover > .child?
William T.Mallard
10

Oui, vous pouvez le faire en utilisant ce code ci-dessous, cela peut vous aider. 

.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>
Développer l'extrait

Iqbal Pacha
la source
11
Si tard pour la fête
Dherya
5
Cette réponse gagnerait à être expliquée. Il me semble qu'il y a plus de code ici qu'il n'en faut et il n'est pas clair sur quelle partie du code nous devrions nous concentrer.
Paul Rooney
0

vous pouvez aussi l'utiliser

.parent:hover * {
   /* ... */
}
Développer l'extrait

m Qmarsi
la source
pouvez-vous expliquer un peu plus votre réponse?
Massimo le