Can CSS Change an Element's Properties on Hovering Over a Different Element?

Impacting a Distinct Element on the Hover of Another

Is it possible to alter an element's properties when a separate element is hovered over? This query delves into ways to achieve this behavior using only CSS.

While CSS's inherent capabilities prevent targeting non-descendants or adjacent siblings, there are specific scenarios where it's possible.

Descendants

If the affected element is a descendant of the hovered element, the CSS selector can effectively target it using:

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

For example, this targets the "child_element" within the "parent_element" on hover:

<div>
<p><strong>Adjacent Siblings</strong></p>
<p>Targeting adjacent siblings requires a slightly different approach:</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

This affects "second_sibling" when "first_sibling" is hovered over:

<div>
<p><strong>Implementation in Your Case</strong></p>
<p>Considering your sample, you likely aim for something similar to:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
    opacity: 0.3;
    color: red;
}

This affects the second image when the first image is hovered over.

Demo

Visit [this JS Fiddle demo](insert demo link here) for an interactive example.