Change color of sibling elements on hover using CSS

Issue

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?

Solution

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");
});

Answered By - Cat