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,这不是你想要的,除非你li占据了整个ul区域.