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

Posted 2023-03-06

【中文标题】选择另一个元素时CSS悬停不起作用[重复]

【英文标题】：CSS Hover Will Not Work When Selecting Another Element [duplicate]

【发布时间】：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>

【参考方案1】：

试试这个..

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

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

span:hover + h1 
  color: blue;

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

【参考方案2】：

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>

【参考方案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 选择器的信息。