Как показать блок при нажатии на ссылку (CSS, no JS)?

Question

[Alexander Lashchevsky]

Здравствуйте!

Решил начать избавлять сайт от огромного обилия JavaScript.
Прошу прощения за банальный вопрос, но адекватного решения я пока не встретил.

Есть определённая ссылка, при клике на которую должен показываться блок.

<a href="#" id="link">Нажми на меня</a>
<div id="block">Много всякого интересного</div>

#block {display: none;}

Если сделать CSS...#link:active + #block {display: block;} ...то блок показывается только если ссылка находится всё время активной. Если ещё сделать #link:visited то, к всё равно ничего не работает.

В интернете я ещё встречал следуюшее решение: завернуть блок в ссылку...

<a href="#" id="link">Нажми на меня
   <div id="block">Много всякого интересного</div>
</a>

... и сделать CSS:#link:hover .block {display: block;}
Но это решение мне не подходит.

Скажите пожалуйста, есть ли какие-то более функциональные решения only CSS?

Всё что я изложил на JSFiddle.

С уважением,
Александр.

Comments

[Юрий Лобанов]

Вы конечно извините, но по Вашему как, то, что Вы хотите — стилевое оформление сайта? В чем смысл? Используйте анимацию на css3, но зачем делать динамику на css? Вы уверены, что с этого нужно начать избавляться от js?
Можете ради интереса кинуть ссылку на сайт?

Answer 1

[Jeiwan]

Вот такой вариант: jsfiddle.net/aqcy21fr/2

Answer 2

[Roman Hinex]

habrahabr.ru/post/167151