How Can I Change a Sibling Element's Color on Hover Using CSS?

Manipulating Colors of Sibling Elements on Hover with CSS

One way to modify the appearance of HTML elements is through CSS. In this article, we'll explore a specific request: changing the color of sibling elements when hovering over them.

Original Problem Statement

Given the following HTML code:

<h1 id="Heading">Heading</h1>
<a class="button" href="#">-</a>

Our goal is to alter the color of the

element when we hover over the element using CSS alone.

Sibling Element Interaction

Unfortunately, CSS sibling selectors cannot affect elements preceding them. In the example above, the

element comes before the element, making it impossible to directly change its color using the (immediately following sibling) selector.

Container-Based Solution

One workaround is to introduce a parent container div with an id:

<div>
<p>However, this does not provide a direct connection between the <a> element and the <h1 id="element"> element.</h1></a></p>
<p><strong>Alternative Approach</strong></p>
<p>To overcome this limitation, consider using CSS to target "next siblings" (elements that come after a specified element). The example below demonstrates how to achieve this:</p>
<pre class="brush:php;toolbar:false">h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

h1:hover + a {
  color: #4f4fd0;
}

This updates the color of the element to #a04f4f in its default state and to #4f4fd0 when we hover over the

element.