如何使悬停在CSS中触发另一个悬停？

Question

例如，当将鼠标悬停在一个元素上时，就像我将鼠标悬停在另一个元素上一样。

Answer 1

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 2

将两个元素分层很短，以使指针同时位于两个元素上，根据定义，您不能...

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

请参见combinators in the specification。

例如：

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 3

如果要在未悬停元素的其他:hover {}条规则中触发规则，则不能。匹配一个选择器不能使另一个不匹配的选择器突然匹配。

CSS具有一组有限的组合器和同级选择器，可用于表达元素之间的关系。这样，您可以选择位于悬停元素中或旁边的元素，例如：

:hover + p { color: red }

＆

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

这就是您可以做的最好的事情。如果需要使其更复杂，则需要使用在其他元素上设置类的JavaScript。