Change element when other element is hovered in CSS

Question

I'm quite confused, as I always thought that you could change an html element's css when another element is hovered directly in css:

h1:hover h2 {
color:red;
}

I recall with all I learned that the above code should change h2's color to red when h1 is hovered over, but it doesn't work. What am I doing wrong?

[check](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Nimish, Apr 30 '17 at 18:05
That will only work if `h2` is a a child or grandchild node of `h1` — Freeman Lambda, Apr 30 '17 at 18:05

score 0 · Answer 1 · answered Apr 30 '17 at 18:08

0

Only if h2 is nested into h1 in your markup. But nesting heading is forbidden by html w3c specs.

answered Apr 30 '17 at 18:08

Andrea Carraro

8,303
3
29
55

score 0 · Answer 2 · answered Apr 30 '17 at 18:09

You are using a descendant combinator, so your rule:

Selects any h2 element that is a descendant of a h1 element which is in a hover state.

source

It isn't possible to have an h2 that is a descendant of an h1 in HTML (it wouldn't make sense: How could a sub-heading be part of a heading?).

The combinators section of the specification might show you something that allows you to trace a path through your DOM (which we can't see because you didn't include your HTML) from your H1 to your H2.

Change element when other element is hovered in CSS

2 Answers2