Styl elementu potomnego po najechaniu kursorem na rodzica

Jak zmienić styl elementu potomnego, gdy na elemencie nadrzędnym znajduje się kursor. Wolałbym rozwiązanie CSS dla tego, jeśli to możliwe. Czy jest możliwe jakieś rozwiązanie poprzez: hover CSS selectors. Właściwie muszę zmienić kolor paska opcji wewnątrz panelu, gdy na panelu znajduje się kursor.

Szukam obsługi wszystkich głównych przeglądarek.

Author: Rajat Gupta, 2011-08-28

2 answers

Tak, zdecydowanie możesz to zrobić. Po prostu użyj czegoś w rodzaju

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

Zgodnie z Ta strona jest obsługiwana przez wszystkie główne przeglądarki.

 178
Author: jtbandes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-16 05:44:15

Tak, możesz to zrobić użyj poniższego kodu, który może Ci pomóc.

.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
Author: Iqbal Pasha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-16 06:17:43