Kann CSS den Stil einer Klasse ändern, wenn man mit der Maus über eine andere fährt?

Verwenden von CSS zum Ändern des Klassenstils beim Bewegen des Mauszeigers

Kann eine einzelne CSS-Regel verwendet werden, um die CSS-Eigenschaften einer Klasse zu ändern, wenn der Mauszeiger darüber bewegt wird? ein Element aus einer separaten Klasse? Ist es möglich, eine Regel wie diese zu erstellen:

.item:hover .wrapper { /*some css*/ }

wobei .wrapper nicht direkt in .item enthalten ist, sondern sich an anderer Stelle im Dokument befindet?

CSS-Lösung

Ja, das ist mit CSS-Selektoren möglich. Es gibt zwei Vorgehensweisen, wenn Sie :hover verwenden, um den Stil eines anderen Elements zu ändern:

1. Nachkommendes oder untergeordnetes Element

Wenn .wrapper ein untergeordnetes Element von .item ist, können Sie diesen Selektor verwenden:

.item:hover .wrapper {
    /* CSS properties to change */
}

2. Geschwisterelement

Wenn .wrapper ein Geschwisterelement von .item ist und nach .item im DOM erscheint, können Sie diesen Selektor verwenden:

.item:hover ~ .wrapper {
    /* CSS properties to change */
}

JavaScript-Lösung

Während JavaScript für diese einfache Aufgabe nicht erforderlich ist, können Sie es verwenden, um das gewünschte Ziel zu erreichen Wirkung. Hier ist ein Beispiel:

document.getElementsByClassName('item')[0].addEventListener('mouseover', function() {
  document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
});

Zusätzliche Informationen

Es ist wichtig zu beachten, dass Ihre Beispielmenüelemente offenbar unterschiedliche Klassen verwenden. Wenn Sie mit der Maus über ein Element fahren, wird dessen Untermenü rechts als Overlay angezeigt. Die Klasse, die den Hintergrund des Untermenüs steuert, heißt „wrapper“. Um den gewünschten Effekt zu erzielen, verwenden Sie den oben beschriebenen Geschwisterselektor-Ansatz.

Referenzen

• [CSS 2.1-Selektoren](https://www.w3.org /TR/CSS21/selectors.html)

Das obige ist der detaillierte Inhalt vonKann CSS den Stil einer Klasse ändern, wenn man mit der Maus über eine andere fährt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!