CSS3 - 悬停显示不同元素

Question

是否可以有纯CSS（不是JavaScript）：

<ul>
  <li>a</li>
  <li>b</li>
</ul>

<div id="x" style="display:none;">c</div>

当我悬停

时显示

？

Answer 1

li 元素位于该 ul 中，因此无法再从 li:hover 访问 #x。因此，如果您必须仅在 li 元素上实现悬停效果，则需要 JavaScript。

如果没有，您可以这样做：

/* Or ul:hover ~ #x if there are any other elements between them */
ul:hover + #x {
    display: block;
}

但是光标可以位于 ul 本身的任何位置，以便显示 #x，而不是直接位于任何 li 上，这并不完全是您想要的，除非您的 li 占据了整个 ul 区域。

Answer 2

几乎但 li 不是 div#x 的 相邻兄弟 他们如果您将 div 放置在 ul 元素内，则会出现这种情况。

<style>
ul:hover + #x {
    display:none;
}
</style>

<ul>
  <li>a</li>
  <li>b</li>
</ul>

<div id="x">c</div>

Answer 3

我认为你需要使用 JavaScript，因为“div”在列表之外。