CSS3 - hover display different element

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 开发者_JAVA技巧<li>?

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.

Almost but li are not a Adjacent sibling for div#x They would be if you placed the div inside the ul element.

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

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

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

I think you mean that...

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

It will set the <div> element to display:block; if you hover one of the <li> tags

I think you need to go with JavaScript as the "div" is outside the list.