Styl elementu potomnego po najechaniu kursorem na rodzica

155

Jak zmienić styl elementu podrzędnego, gdy na elemencie nadrzędnym znajduje się wskaźnik myszy. Jeśli to możliwe, wolałbym rozwiązanie CSS. Czy jest możliwe rozwiązanie poprzez: najedź na selektory CSS. Właściwie muszę zmienić kolor paska opcji wewnątrz panelu, gdy na panelu jest najechanie kursorem.

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

css css-selectors Rajat Gupta
źródło

Odpowiedzi:

273

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

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

Zgodnie z tą stroną jest obsługiwany przez wszystkie główne przeglądarki.

jtbandes
źródło
8
Dziękuję, właśnie pomogliście mi ożywić moją stronę internetową dzięki CSS3.
Nick Taras
1
W końcu nauczyłem się wystarczająco CSS, aby wiedzieć, o co prosić, dzięki za pomoc! Zauważ, że dotyczy to wszystkich potomków, jeśli chcesz tylko dzieci, które myślę, że potrzebujesz .parent:hover > .child?
William T. Mallard
8

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>
Rozwiń fragment

Iqbal Pasha
źródło
10
Tak późno na imprezę
Dherya
4
Ta odpowiedź zyskałaby na pewnym wyjaśnieniu. Wydaje mi się, że jest tu więcej kodu, niż potrzeba, i nie jest jasne, na której części powinniśmy się skupić.
Paul Rooney,
0

możesz też tego użyć

.parent:hover * {
   /* ... */
}
Rozwiń fragment

m Qmarsi
źródło
czy możesz wyjaśnić trochę więcej swojej odpowiedzi?
Massimo