Stil untergeordnetes Element, wenn Sie mit der Maus über das übergeordnete Element fahren

155

So ändern Sie den Stil des untergeordneten Elements, wenn sich das übergeordnete Element im Hover befindet. Ich würde dafür nach Möglichkeit eine CSS-Lösung bevorzugen. Gibt es eine mögliche Lösung durch: Hover-CSS-Selektoren. Eigentlich muss ich die Farbe der Optionsleiste in einem Panel ändern, wenn sich ein Hover auf dem Panel befindet.

Ich möchte alle gängigen Browser unterstützen.

css css-selectors Rajat Gupta
quelle

Antworten:

273

Ja, das können Sie definitiv tun. Verwenden Sie einfach so etwas wie

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

Laut dieser Seite wird es von allen gängigen Browsern unterstützt.

jtbandes
quelle
8
Vielen Dank, Sie haben mir gerade geholfen, meine Webseite mit CSS3 zum Leben zu erwecken.
Nick Taras
1
Endlich genug CSS gelernt, um zu wissen, wonach man fragen muss, danke für die Hilfe! Beachten Sie, dass dies für alle Nachkommen gilt. Wenn Sie nur Kinder möchten, denke ich, brauchen Sie .parent:hover > .child?
William T. Mallard
8

Ja, Sie können dies mit dem folgenden Code tun, der Ihnen möglicherweise hilft. 

.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>
Erweitern Sie das Snippet

Iqbal Pascha
quelle
10
So spät zur Party
Dherya
4
Diese Antwort würde von einer Erklärung profitieren. Es scheint mir, dass es hier mehr Code gibt, als es sein muss, und es ist nicht klar, auf welchen Teil des Codes wir uns konzentrieren sollten.
Paul Rooney