Wie kann ich ein untergeordnetes Element formatieren, wenn der Mauszeiger über dessen übergeordnetes Element bewegt wird?

Untergeordnetes Element beim Bewegen des Mauszeigers über das übergeordnete Element formatieren

In verschiedenen Szenarien ist es wünschenswert, den Stil untergeordneter Elemente zu ändern, wenn Benutzer mit der Maus über ihre übergeordneten Elemente fahren . Dies kann in erster Linie durch CSS-Lösungen erreicht werden, insbesondere durch die Verwendung des :hover-Pseudoklassenselektors.

Wenn Sie beispielsweise die Farbe einer Optionsleiste innerhalb eines Panels ändern möchten, wenn der Benutzer mit der Maus über das Panel fährt, bietet sich CSS an ein einfacher Ansatz:

.parent:hover .child {
  /* Style for child element on hover */
}

Dieses Snippet verwendet die Pseudoklasse :hover, um anzugeben, dass die Stiländerungen nur für untergeordnete Elemente (.child) gelten sollen, wenn ihre übergeordneten Elemente vorhanden sind (.parent) werden mit der Maus darüber bewegt. Mit dem Nachkommenkombinator (Leerzeichen) können wir jeden Nachkommen des übergeordneten Elements auswählen, der mit dem untergeordneten Selektor übereinstimmt.

Betrachten Sie dieses Live-Beispiel:

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

.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;
}

Dieser Code ändert den Hintergrund Farbe, transformiert die Skalierung und passt den eingefügten Rand des untergeordneten Elements an, wenn der Mauszeiger über das übergeordnete Element bewegt wird, was die Wirksamkeit von CSS in diesem Bereich demonstriert Kontext.

Das obige ist der detaillierte Inhalt vonWie kann ich ein untergeordnetes Element formatieren, wenn der Mauszeiger über dessen übergeordnetes Element bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!