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 площадь.

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

Я думаю, вы имеете в виду, что ...

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

Он установит для элемента <div> значение display:block;, если вы наведете указатель мыши на один из тегов <li>

Answer 4

Я думаю, вам нужно использовать JavaScript, так как "div" находится вне списка.