Wie unterbricht man übergeordnete Hover-Effekte, wenn man mit der Maus über ein untergeordnetes Element fährt?

Die CSS-Lösung

Um dieses Verhalten ohne JavaScript zu erreichen, ist eine clevere Problemumgehung erforderlich unter Verwendung eines Geschwisterelements.

<code class="css">.parent {
  width: 100px;
  height: 100px;
  padding: 50px;
  background: lightgray;
}

.parent:hover {
  background: lightblue;
}

.child {
  height: 100px;
  width: 100px;
  background: darkgray;
}

.child:hover {
  background: lightblue;
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;
}

.sibling:hover {
  background: #FFF;
}</code>

<code class="html"><div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div></code>

Der Geschwisterelement-Trick

Das Geschwisterelement ist absolut innerhalb des übergeordneten Elements positioniert und überlappt sowohl das übergeordnete als auch das untergeordnete Element Elemente. Es erstreckt sich über die Grenzen des übergeordneten Elements hinaus und erfasst effektiv alle Hover-Ereignisse, die nicht speziell auf das untergeordnete Element abzielen.

Wenn der Hover über das gleichgeordnete Element gelegt wird, ändert sich seine Hintergrundfarbe in Weiß, wodurch der Hover-Effekt des übergeordneten Elements optisch aufgehoben wird. Wenn das untergeordnete Element schwebend ist, bleibt sein eigener Schwebeeffekt erhalten, aber das weiße Geschwisterelement verbirgt den Schwebeeffekt des übergeordneten Elements.

Neueste Entwicklungen

Beachten Sie, dass :has( )-Selektor existiert jetzt und ermöglicht die direkte Ausrichtung auf übergeordnete Elemente basierend auf dem Vorhandensein bestimmter Nachkommen. Mit diesem Ansatz kann das gewünschte Verhalten eleganter erreicht werden.

<code class="css">.parent:has(.child:hover) {
  background: lightgray !important;
}</code>

Das obige ist der detaillierte Inhalt vonWie unterbricht man übergeordnete Hover-Effekte, wenn man mit der Maus über ein untergeordnetes Element fährt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!