Wie kann man übergeordnete Hover-Effekte verhindern, wenn man in verschachtelten DIVs mit der Maus über ein untergeordnetes Element fährt?

Verschachtelte DIVs: Deaktivieren von Hover-Effekten auf übergeordnete Elemente, wenn das Kind mit der Maus bewegt wird

In diesem Szenario haben Sie zwei verschachtelte DIV-Elemente mit der Bezeichnung „ .parent“ und „.child“. Wenn Sie mit der Maus über „.parent“ fahren, soll sich die Hintergrundfarbe ändern. Wenn Sie jedoch mit der Maus über „.child“ fahren, soll „.parent“ auf den standardmäßigen grauen Hintergrund zurückgesetzt werden.

CSS-Code für übergeordnete und untergeordnete Hover-Effekte:

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

Problem:

Der obige CSS-Code wendet die gewünschten Hover-Effekte erfolgreich sowohl auf „.parent“ als auch auf „.child“ an. Es wird jedoch nicht auf die Anforderung eingegangen, den Hover-Effekt für „.parent“ zu deaktivieren, wenn „.child“ mit der Maus bewegt wird.

Lösung mit einem Geschwisterelement:

Wie sich herausstellt, bietet CSS keine direkte Möglichkeit, diesen Effekt mit verschachtelten Elementen zu erzielen. Sie können jedoch einen cleveren Workaround verwenden, indem Sie ein Geschwisterelement verwenden.

1. Fügen Sie ein neues DIV-Geschwisterelement mit der Klasse „.sibling“ im „.parent“-Container hinzu.
2. Positionieren Sie das „ .sibling“-Element, um das „.child“-Element mit den CSS-Eigenschaften „top“ und „left“ abzudecken.
3. Legen Sie einen höheren „z-index“-Wert für „.sibling“ fest, um sicherzustellen, dass es über „ erscheint. child.“
4. Fügen Sie den gleichen Hintergrundfarbübergangseffekt zu „.sibling“ hinzu, den Sie auf „.parent“ angewendet haben.

Aktualisiertes CSS mit Sibling-Element:

<code class="css">.parent {
  ... (unchanged)
}

.child {
  ... (unchanged)
}

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

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

So funktioniert es:

Wenn sich der Mauszeiger über „.child“ bewegt, ändert sich die Hintergrundfarbe von „.child“. Gleichzeitig ändert sich auch die Hintergrundfarbe von „.sibling“ aufgrund des darauf angewendeten Hover-Effekts. Da „.sibling“ „.child“ abdeckt, überschreibt die Änderung der Hintergrundfarbe effektiv den auf „.parent“ angewendeten Hover-Effekt. Dadurch entsteht die Illusion, dass der Hover-Effekt für „.parent“ deaktiviert wurde.

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