Kann :hover externe CSS-Klassen ändern?

Kann :hover externe CSS-Klassen ändern?

In CSS können wir mithilfe des :hover-Selektors Stiländerungen an Elementen beim Hover anwenden. Was aber, wenn wir das CSS eines Elements in einer anderen Klasse ändern möchten, wenn der Mauszeiger über ein anderes Element bewegt wird?

Da CSS-Selektoren nur auf Elemente basierend auf ihrer Hierarchie oder Beziehungen innerhalb des DOM abzielen, ist dies nicht direkt möglich Ändern Sie das CSS eines Elements außerhalb des Geltungsbereichs des aktuellen Hover-Elements.

Optionen für indirekte Änderungen

Es gibt jedoch indirekte Ansätze, um ähnliche Effekte zu erzielen:

• Eltern-Kind-Beziehung: Wenn das Element, das Sie ändern möchten (E), ein untergeordnetes Element des schwebenden Elements (F) ist, können Sie den :hover-Selektor auf F verwenden, um E als Ziel festzulegen .

.item:hover .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' is hovered */
}

• Geschwisterbeziehung: Wenn E ein Geschwister von F (oder ein Nachkomme eines von Fs Geschwistern) ist, können Sie den ~ Geschwister-Kombinator verwenden in CSS.

.item:hover ~ .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' or any of its siblings is hovered */
}

JavaScript-Lösung

Wenn CSS-Lösungen nicht machbar sind, können Sie JavaScript verwenden, um die CSS-Eigenschaften von E basierend auf dem zu manipulieren Schwebezustand von F.

<code class="javascript">document.querySelector('.item').addEventListener('mouseenter', () => {
  document.querySelector('.wrapper').style.backgroundColor = 'red';
});

document.querySelector('.item').addEventListener('mouseleave', () => {
  document.querySelector('.wrapper').style.backgroundColor = '';
});</code>

Fazit

Während CSS-Selektoren allein externe Klassen nicht direkt ändern können, bieten die Eltern-Kind- oder Geschwisterbeziehung und JavaScript indirekte Lösungen dafür ähnliche Effekte erzielen.

Das obige ist der detaillierte Inhalt vonKann :hover externe CSS-Klassen ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!