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

Bewegen Sie den Mauszeiger über ein untergeordnetes Element und unterbrechen Sie die Hover-Effekte des übergeordneten Elements

Wenn

Wenn Elemente nebeneinander existieren, kann das Bewegen des Mauszeigers über das untergeordnete Element den auf das übergeordnete Element angewendeten Hover-Effekt beeinträchtigen. Umgekehrt möchten Sie möglicherweise, dass ein Hover-Effekt auf dem übergeordneten Element deaktiviert wird, wenn Sie mit der Maus über das untergeordnete Element fahren.

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn