CSS Hover Will Not Work When Selecting Another Element

Question

When hovering over the span I would like the H1 element to turn blue. However, it does not. What am I doing wrong?

span:hover {
  background-color: red;
  color: white;
}
span:hover h1 {
  color: blue;
}

<span>HOVER</span>
<h1>test</h1>

score 3 · Accepted Answer · answered Jul 22 '21 at 05:38

The H1 is not a child of the span it's a sibling so you need the sibling combinator + https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

span:hover {
  background-color: red;
  color: white;
}
span:hover + h1 {
  color: blue;
}

<span>HOVER</span>
<h1>test</h1>

score 2 · Answer 2 · answered Jul 22 '21 at 05:38

2

Try this..

Check this for what does the “+” (plus sign) CSS selector mean?

span:hover {
  background-color: red;
  color: white;
}
span:hover + h1 {
  color: blue;
}

<span>HOVER</span>
<h1>test</h1>

answered Jul 22 '21 at 05:38

user3733831

score 1 · Answer 3 · answered Jul 22 '21 at 05:43

Inorder to style the adjecent sibling you have to use + like span:hover + h1

span:hover {
  background-color: red;
  color: white;
}

span:hover + h1 {
  color: blue;
}

<span>HOVER</span>
<h1>test</h1>

span:hover h1 tries to find h1 node inside the span while its in hover state. This will be working when your layout is in below format only.

span:hover {
  background-color: red;
  color: white;
}

span:hover h1 {
  color: blue;
}

<span>
  HOVER
  <h1>test</h1>
</span>

Refer this document for much more understanding regarding css selectors.

3 Answers3