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

Comment changer le style de l'élément enfant quand il y a un survol sur l'élément parent. Je préférerais une solution CSS pour cela si possible. Existe-t-il une solution possible via :hover CSS selectors. En fait, j'ai besoin de changer la couleur de la barre d'options à l'intérieur d'un panneau quand il y a un survol sur le panneau.

vous cherchez à soutenir tous les principaux navigateurs.

100
demandé sur Rajat Gupta 2011-08-28 00:46:45

2 réponses

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

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

Selon cette page est prise en charge par tous les principaux navigateurs.

178
répondu jtbandes 2016-02-16 05:44:15

Oui, vous pouvez utiliser ce code ci-dessous il 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>
0
répondu Iqbal Pasha 2016-02-16 06:17:43