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 untergeordnetes Element von E: Wenn das Element, dessen CSS Sie ändern möchten (F), ein untergeordnetes Element des schwebenden Elements (E) ist, verwenden Sie:

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

2. F als Geschwister von E: Wenn F kein Kind von E ist, sondern eher ein späteres Geschwister oder sein Nachkomme im DOM (erscheint nach E in das 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 eine alternativer 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!