Können Sie CSS beim Hover für nicht verwandte Elemente ändern?

Können Sie das CSS einer anderen Klasse beim Hover ändern?

Viele Entwickler stehen vor der Notwendigkeit, das CSS eines Elements bei einem anderen zu ändern Das nicht verwandte Element wird mit der Maus darüber bewegt. CSS allein birgt oft Einschränkungen bei der Erreichung dieses Ziels und veranlasst die Suche nach möglichen Lösungen.

CSS-Lösungen

Zum Glück bietet CSS zwei effektive Ansätze für diese Aufgabe:

1. F als Kind von E: Wenn das Element, dessen CSS Sie ändern möchten, (F) ist ein untergeordnetes Element des schwebenden Elements (E), verwenden Sie:

   .item:hover .wrapper {
       /* CSS modifications for element F */
   }

2. F als Geschwister von E: Wenn F kein untergeordnetes Element von E ist, sondern eher ein späteres Geschwister oder sein Nachkomme im DOM (erscheint nach E im Markup), Verwenden Sie:

   .item:hover ~ .wrapper {
       /* CSS modifications for element F */
   }

JavaScript-Alternative

Obwohl JavaScript für solche einfachen Aufgaben im Allgemeinen nicht empfohlen wird, bietet es einen alternativen Ansatz:

document.getElementsByClassName('item')[0].onmouseover = () => {
    document.getElementsByClassName('wrapper')[0].style.backgroundColor = "url('some url')";
};

Das obige ist der detaillierte Inhalt vonKönnen Sie CSS beim Hover für nicht verwandte Elemente ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!