Can CSS Alone Style One Element When Hovering Over Another?

Hovering over One Element to Affect Another Using CSS

Question:

Achieving a CSS effect where hovering over one element directly alters the appearance of another nearby element can be tricky. Despite attempts to implement such an effect, it remains unclear if it's even possible purely through CSS.

Answer:

The ability to affect an element's appearance upon hovering over a different element using CSS is strictly limited. In fact, it can only be done if the targeted element is either a descendent or an adjacent sibling of the trigger element.

Descendent Elements:

If the affected element is nested within the trigger element, CSS can be used to manipulate it on hover:

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

This selector will apply the effect to elements with the following structure:

<div>
<p><strong>Adjacent Siblings:</strong></p>
<p>For elements that are adjacent siblings to the trigger element, a different approach is necessary:</p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
  opacity: 0.3;
}

This selector will target elements in the following HTML structure:

<div>
<p><strong>Limitations:</strong></p>
<p>In both cases, it's important to note that the latter element specified in the selector is the one that will be affected on hover.</p>
<p><strong>Example:</strong></p>
<p>For a scenario similar to the provided pseudo-code example, the following CSS rule could be used:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
  opacity: 0.3;
  color: red;
}

An example demonstrating this effect can be found in the provided JS Fiddle: https://jsfiddle.net/