CSS3 - 悬停显示不同的元素

Question

是否可以使用纯粹的css（而不是javascript）：

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

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

当我将鼠标悬停在<div>时显示<li>

Answer 1

li元素位于ul中，因此无法再从#x访问li:hover。因此，如果您必须仅对li元素具有悬停效果，则需要使用JavaScript。

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

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

但是光标可以在ul本身的任何位置显示#x，而不是直接显示在任何li上，这不是你想要的，除非你{ {1}}占据整个li区域。

Answer 2

几乎所有的li都不是div {x的Adjacent sibling。如果你把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作为＆＃34; div＆＃34;在列表之外。

Answer 4

我认为你的意思是......

<style>
li:hover div#x{
  display:block;
}
</style>

如果您悬停其中一个<div>代码，则会将display:block;元素设置为<li>