Können Hover-Effekte auf einem Element mithilfe von CSS zu einem anderen kaskadieren?

Können Auswirkungen auf ein Element ein anderes Element beeinflussen?

Der angegebene Code zielt darauf ab, die Deckkraft eines Bildes zu erhöhen und gleichzeitig die Deckkraft eines anderen Elements zu verringern wenn der Cursor über dem Bild schwebt. Obwohl ein solcher Effekt einfach erscheinen mag, kann CSS allein ihn nicht ausführen.

Um den gewünschten Effekt zu erzielen, müssen die beiden betroffenen Elemente entweder Nachkommen oder benachbarte Geschwister im Code sein.

Auswirkung auf Descendant

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

Dies wirkt sich auf strukturierte Elemente aus als:

<div>

Auswirkung auf benachbarte Geschwister

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

Dies funktioniert für die HTML-Struktur:

<div>

In beiden Fällen ist die Das zweite Element im Selektor ist betroffen.

Für den spezifischen Bedarf, der in der Abfrage angegeben ist, könnte ein Ausdruck wie dieser sein Arbeit:

img:hover + img {
    opacity: 0.3;
    color: red;
}

[JS Fiddle Demo](https://jsfiddle.net/)

Das obige ist der detaillierte Inhalt vonKönnen Hover-Effekte auf einem Element mithilfe von CSS zu einem anderen kaskadieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!