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.

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.


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>


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,

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.