Kann CSS die Eigenschaften eines Elements ändern, wenn der Mauszeiger über ein anderes Element bewegt wird?

Auswirkung auf ein bestimmtes Element beim Schweben eines anderen Elements

Ist es möglich, die Eigenschaften eines Elements zu ändern, wenn der Mauszeiger über ein separates Element bewegt wird? Diese Abfrage befasst sich mit Möglichkeiten, dieses Verhalten nur mit CSS zu erreichen.

Während die inhärenten Fähigkeiten von CSS verhindern, dass Nicht-Nachkommen oder benachbarte Geschwister als Ziel ausgewählt werden, gibt es bestimmte Szenarien, in denen dies möglich ist.

Nachkommen

Wenn das betroffene Element ein Nachkomme des schwebenden Elements ist, kann der CSS-Selektor effektiv zielen es mit:

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

Zum Beispiel zielt dies auf das „child_element“ innerhalb des „parent_element“ beim Schweben ab:

<div>
<p><strong>Benachbarte Geschwister</strong></p>
<p>Die Ausrichtung auf benachbarte Geschwister erfordert einen etwas anderen Ansatz:</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

Dies wirkt sich auf „zweiter_Geschwister“ aus, wenn der Mauszeiger über „erster_Geschwister“ bewegt wird:

<div>
<p><strong>Implementierung in Ihrem Fall</strong></p>
<p>Wenn Sie Ihre Stichprobe betrachten, streben Sie wahrscheinlich nach etwas Ähnlichem wie:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
    opacity: 0.3;
    color: red;
}

Dies wirkt sich auf das zweite Bild aus, wenn der Mauszeiger über das erste Bild bewegt wird vorbei.

Demo

Besuchen Sie [diese JS Fiddle-Demo] (Demo-Link hier einfügen) für ein interaktives Beispiel.