如何使悬停触发另一个悬停在CSS？ [重复]

Question

这个问题在这里已有答案：

例如，当悬停在一个元素上时，它也就好像我在同一时间盘旋在另一个元素上。

Answer 1

如果没有将两个元素分层，以便指针同时位于它们上面，那么根据定义，你不能......

当第一个元素通过组合器悬停时，您可能能够编写与其他元素匹配的选择器，但具体情况将取决于DOM中元素之间的关系。

例如：

div div {
  margin-left: 1em;
}

div:hover {
  outline: solid red 1px;
}

div:hover~div>div {
  background: orange;
}

<div>First</div>
<div>Second</div>
<div>
  Third
  <div>Child of third</div>
</div>
<div>
  Fourth
</div>

Answer 2

HTML：

<div href="#" id='1'>Hover</div>

<div id='2'>Hello I am visible</div>

CSS：

#1 {
  display: block;
}

#1:hover + #2 {
  display:block;
}

#2 {
  display:none;
  }

Answer 3

如果你的意思是在一个其他:hover {}规则中触发一个未被发现的元素的规则，那么你就不能。匹配一个选择器不能使另一个非匹配选择器突然匹配。

CSS有一组有限的组合子和兄弟选择器，可以让你表达元素之间的关系。通过这种方式，您可以选择悬停元素中或旁边的元素，例如：

:hover + p { color: red }

&

<div>hover me</div>
<p>I'll become red</p>

这是你能做的最好的事情。如果你需要它更复杂，你需要使用JavaScript来设置其他元素的类。