Wie kann ich untergeordnete Elemente mithilfe von CSS formatieren, wenn deren übergeordnetes Element mit der Maus darüber bewegt wird?

Targeting untergeordneter Elemente beim Hover des übergeordneten Elements

Frage:

Wie können wir den Stil eines untergeordneten Elements ändern, wenn das Über dem übergeordneten Element befindet sich der Mauszeiger, vorzugsweise mit CSS? Ist dies mit :hover-Selektoren erreichbar?

Antwort:

Ja, CSS bietet eine einfache Lösung für diese Anforderung. Durch die Verwendung der :hover-Pseudoklasse und des Descendent-Kombinators können wir gezielt auf untergeordnete Elemente innerhalb schwebender übergeordneter Elemente abzielen.

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

In dieser Regel gilt die :hover-Pseudoklasse für das .parent-Element, wenn der Cursor schwebt darüber. Der Nachkommenkombinator (Leerzeichen) wählt dann jedes Nachkommenelement aus, das mit der .child-Klasse übereinstimmt. Dadurch können wir den Stil des untergeordneten Elements als Reaktion auf das Bewegen des übergeordneten Elements ändern.

Darüber hinaus unterstützen moderne Browser eine Vielzahl von CSS-Eigenschaften, die für das untergeordnete Element geändert werden können, einschließlich Farbe, Schriftart, Hintergrund und Übergänge. Hier ist ein Beispiel zur Veranschaulichung des Konzepts:

.parent {
  border: 1px dashed gray;
  padding: 0.5em;
  display: inline-block;
}

.child {
  border: 1px solid brown;
  margin: 1em;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background: #cef;
  transform: scale(1.5) rotate(3deg);
  border: 5px inset brown;
}

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich untergeordnete Elemente mithilfe von CSS formatieren, wenn deren übergeordnetes Element mit der Maus darüber bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!