CSS - при наведении на один div появляется другой div

Может быть у меня просто мозги уже не варят, но я не могу понять, почему не работает следующий код (div не исчезает при наведении на ссылку):

Код: [развернуть]

<style> div { display: block; } a:hover.div { display: none; } </style> <a href="#">Ссылка, при наведении на которую должен исчезнуть div</a>              <div>Тот див, который должен исчезнуть</div>

Заранее спасибо

Последний раз редактировалось: davedeviss (27/02/14 в 23:58), всего редактировалось 1 раз

может потому что никакого дива внутри анкора нет?

Надо заменить a:hover.div на a:hover + div или a:hover ~ div

CABMIT: Спасибо! Я о таком методе никогда не слышал, но работает.

CABMIT: А что вообще значит этот плюс? Буду благодарен за ссылку.

Кароче откопал я инфы по этому вопросу.

Мой метод работает только в том случае когда блок вложен в другой блок. Пример:

Код: [развернуть]

<div> <div><div/> </div>

Метод, который предложил CABMIT может работать, если блоки не вложены. Пример:

Код: [развернуть]

<div></div> <div></div>

Но в этом случае они не должны быть вложены в другие элементы. И поэтому конструкция вида:

Код: [развернуть]

<nav> <div></div> </nav> <div></div>

... работать не будет. Тут только средствами JS.

Может быть кому-то эта информация сэкономит время.

davedeviss писал:

CABMIT: А что вообще значит этот плюс? Буду благодарен за ссылку.

Вот неплохая статья про CSS-селекторы http://everstudent.ru/blog/htmlcss/30-css-seletors-to-memorize/
Конечно, с помощью CSS не всё можно сделать. Например, на данный момент нет возможности выбрать родительский элемент и т.д.