选择另一个元素时CSS悬停不起作用[重复]答案

【问题标题】：CSS Hover Will Not Work When Selecting Another Element [duplicate]选择另一个元素时CSS悬停不起作用[重复]
【发布时间】：2021-09-29 10:18:19
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

试试这个..

检查this 中的“+”（加号）CSS 选择器是什么意思？

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

为了设置相邻兄弟的样式，您必须使用 + 像 span:hover + h1

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

span:hover + h1 {
  color: blue;
}

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

span:hover h1 尝试在 span 处于悬停状态时找到 h1 节点。当您的布局仅采用以下格式时，这将起作用。

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

span:hover h1 {
  color: blue;
}

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

请参阅 this 文档以了解更多有关 CSS 选择器的信息。

【讨论】：