Wie verwende ich :hover, um das CSS einer anderen Klasse zu ändern?

So verwenden Sie: Bewegen Sie den Mauszeiger, um das CSS einer anderen Klasse zu ändern

Es gibt Fälle, in denen Sie möglicherweise das CSS einer Klasse ändern möchten wenn Sie den Mauszeiger über ein Element einer anderen Klasse bewegen und nur CSS verwenden. Diese Technik ist besonders nützlich, wenn Sie visuell ansprechende Effekte erstellen möchten, ohne auf JavaScript angewiesen zu sein.

Nur-CSS-Lösungen:

Um diesen Effekt allein mit CSS zu erzielen, finden Sie hier Es gibt zwei Hauptansätze:

• Das Element, das Sie ändern möchten (F), ist entweder ein untergeordnetes Element des Elements, auf dem Sie den Mauszeiger halten (E), oder
• F ist ein späteres Geschwister oder Nachkomme von E (E erscheint im Markup/DOM vor F).

Erste Option: F als Kind von E

Wenn F ein untergeordnetes Element von E ist, können Sie den folgenden CSS-Selektor verwenden:

<code class="css">.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}</code>

Dieser Selektor wendet die angegebenen CSS-Regeln nur dann auf das .wrapper-Element an, wenn der Mauszeiger über das .item-Element bewegt wird.

Zweite Option: F als Geschwisterelement von E

Wenn F ein Geschwisterelement von E ist, können Sie den folgenden CSS-Selektor verwenden:

<code class="css">.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}</code>

Dieser Selektor wendet die CSS-Regeln nur dann auf das .wrapper-Element an, wenn der Mauszeiger über das .item-Element bewegt wird, vorausgesetzt, dass .wrapper ein direkter Geschwisterteil von .item ist. Sie können auch .item:hover .wrapper verwenden, wenn .wrapper ein unmittelbares Geschwister von .item ist und keine anderen Elemente dazwischen liegen.

JavaScript-Lösung:

Wenn Sie Wenn Sie mit CSS allein nicht den gewünschten Effekt erzielen können, können Sie auf JavaScript zurückgreifen. Hier ist ein einfaches Beispiel:

<code class="javascript">document.getElementsByClassName('item')[0].onmouseover = function() {
    document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
};</code>

Dieser JavaScript-Code ändert die Hintergrundeigenschaft des .wrapper-Elements, wenn der Mauszeiger auf das .item-Element bewegt wird. Beachten Sie, dass diese Lösung nicht so effizient oder elegant ist wie die reinen CSS-Ansätze.

Fazit:

Mit CSS oder JavaScript können Sie das CSS einer Klasse ändern basierend auf dem Schweben einer anderen Klasse. Die reinen CSS-Lösungen sind aufgrund ihrer Effizienz und Einfachheit vorzuziehen, aber JavaScript kann in Fällen verwendet werden, in denen CSS nicht ausreicht.

Das obige ist der detaillierte Inhalt vonWie verwende ich :hover, um das CSS einer anderen Klasse zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!