html - 选择另一个元素时 CSS 悬停将不起作用

Question

当悬停在跨度上时，我希望 H1 元素变为蓝色。但是，事实并非如此。我究竟做错了什么？

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

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

标签： htmlcss

Answer 1

H1 不是跨度的孩子，它是兄弟，所以你需要兄弟组合器+ 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>