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!