Question

is it possible to have purely css (not javascript) this:

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

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

Display the <div> when I hover a <li>?

Answer 1

The li elements are in that ul, so #x is no longer reachable from li:hover. So if you must have the hover effect only on the li elements, you’ll need JavaScript.

If not, you could do this instead:

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

But the cursor can be anywhere on the ul itself for #x to show up, rather than being directly on any li, which isn’t quite what you want unless your lis take up the entire ul area.