Wie kann ich ein untergeordnetes Element formatieren, wenn sich sein übergeordnetes Element darüber befindet?

Untergeordnete Elemente beim Schweben über das übergeordnete Element gestalten

Müssen Sie das Erscheinungsbild eines untergeordneten Elements ändern, wenn Sie mit der Maus über das übergeordnete Element fahren? Geben Sie den mächtigen :hover-Selektor von CSS ein.

Um dies zu tun:

.parent:hover .child {
  /* Styling for the child element when the parent is hovered */
}

Mit diesem Selektor zielen Sie auf das untergeordnete Element, wenn der Mauszeiger über das übergeordnete Element „.parent“ bewegt wird. Der Nachkommenkombinator (Leerzeichen) wählt Nachkommen aus, die mit „.child“ übereinstimmen.

Zum Beispiel:

.parent:hover .child {
  background-color: #ccc;
}

Dadurch wird der Hintergrund des untergeordneten Elements grau, wenn Sie mit der Maus über das übergeordnete Element fahren.

Live-Beispiel:

<div class="parent">
  <p class="child">Hover me</p>
</div>

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

.child {
  background-color: white;
  padding: 0.5em;
  transition: all 0.5s;
}

.parent:hover .child {
  background-color: #ccc;
  transform: scale(1.1);
}

Dieses Beispiel ändert den Hintergrund des untergeordneten Elements in Grau und skaliert ihn leicht up on parent hover.

Denken Sie daran, dass die Unterstützung Ihres Browsers hier behandelt wird. Tauchen Sie ein in CSS und verbessern Sie Ihr Benutzererlebnis!

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