Change color of sibling elements on hover using CSS

Question

In my HTML below, when I hover on the <a> element I want to change the colour of the <h1> element using only CSS. Is there a way to achieve this?

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

What if I wrap a div around it with an id in it?

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

Will this help?

Answer 1

You can make a sibling that follows an element change when that element is hovered, for example you can change the color of your a link when the h1 is hovered, but you can't affect a previous sibling in the same way.

h1 {      color: #4fa04f;  }  h1 + a {      color: #a04f4f;  }  h1:hover + a {      color: #4f4fd0;  }  a:hover + h1 {      background-color: #444;  }

<h1>Heading</h1>  <a class="button" href="#">The &quot;Button&quot;</a>  <h1>Another Heading</h1>

We set the color of an H1 to a greenish hue, and the color of an A that is a sibling of an H1 to reddish (first 2 rules). The third rule does what I describe -- changes the A color when the H1 is hovered.

But notice the fourth rule a:hover h1 only changes the background color of the H1 that follows the anchor, but not the one that precedes it.

This is based on the DOM order, and it's possible to change the display order of elements, so even though you can't change the previous element, you could make that element appear to be after the other element to get the desired effect.
Note that doing this could affect accessibility, since screen readers will generally traverse items in DOM order, which may not be the same as the visual order.

Answer 2

There is no CSS selector that can do this (in CSS3, even). Elements, in CSS, are never aware of their parent, so you cannot do a:parent h1 (for example). Nor are they aware of their siblings (in most cases), so you cannot do #container a:hover { /* do something with sibling h1 */ }. Basically, CSS properties cannot modify anything but elements and their children (they cannot access parents or siblings).

You could contain the h1 within the a, but this would make your h1 hoverable as well.

You will only be able to achieve this using JavaScript (jsFiddle proof-of-concept). This would look something like:

$("a.button").hover(function() {     $(this).siblings("h1").addClass("your_color_class"); }, function() {     $(this).siblings("h1").removeClass("your_color_class"); });