Wie deaktiviere ich den Hover-Effekt für das übergeordnete Element, wenn ich in CSS mit der Maus über das untergeordnete Element fahre?

Hover-Effekt auf untergeordnetem Element deaktiviert Hover-Effekt auf übergeordnetem Element

Das Problem:

Sie haben zwei verschachtelte

Elemente, und Sie möchten den Hintergrund des übergeordneten Elements .parent ändern, wenn Sie mit der Maus darüber fahren. Wenn Sie jedoch mit der Maus über das untergeordnete Element .child fahren, soll der Hintergrund des übergeordneten Elements in seinen ursprünglichen Zustand zurückkehren.

Die Lösung:

Mit reinem CSS war dies bisher nicht möglich diesen Effekt direkt erzielen. Mit der kürzlichen Einführung des :has-Selektors im Jahr 2024 ist es nun jedoch möglich, dieses Problem zu beheben:

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

/* The solution using the :has selector */
.parent:has(.child:hover) {
  background: lightgray;
}</code>

Indem wir auf das übergeordnete Element abzielen, das über ein schwebendes untergeordnetes Element verfügt, können wir das Schweben effektiv deaktivieren Auswirkung auf das übergeordnete Element, wenn der Mauszeiger über das untergeordnete Element bewegt wird.

Vorherige eingeschränkte Lösung (vor 2024):

Vor der Einführung des :has-Selektors bestand eine Problemumgehung darin, ein Geschwisterelement zu verwenden einen ähnlichen Effekt erzielen:

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

.child {
  height: 100px;
  width: 100px;
  background: #355E95;
  transition: background-color 1s;
  position: relative;
  top: -200px;
}

.child:hover {
  background: #000;
}

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

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

Bei diesem Ansatz wurde ein Geschwisterelement erstellt, das über dem untergeordneten Element positioniert wird. Wenn Sie den Mauszeiger über das Kind bewegen, ändert sich die Hintergrundfarbe des Geschwisterkindes, wodurch der Hintergrund des Elternteils effektiv ausgeblendet wird.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich den Hover-Effekt für das übergeordnete Element, wenn ich in CSS mit der Maus über das untergeordnete Element fahre?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css using this background issue

Stellungnahme：

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