Есть ли способ обрабатывать события click на CSS без использования JavaScript. Можно использовать метод с :target. Но что если его нельзя использовать? Есть другой метод. Посмотрите демонстрацию. Она полностью выполнена на CSS, ни строчки кода JavaScript. В основе лежит оригинальное использование селекторов :active и :hover. Описание Сначала нужно создать контейнер, который будет содержать кнопку и блоки, выводимые по нажатию мыши. Структура разметки будет примерно такой: 1 <div class="wrapper"> 2 <div class="content"> 3 <li>Lorem ipsum dolor sit amet.</li> 4 <li>Consectetur adipiscing elit.</li> 5 </div> 6 <div class="button">Кнопка</div> 7 </div> Нужно сделать .content невидимым до тех пор, пока не нажата кнопка мыши на .wrapper. Для решения задачи установим для .content свойство display: none. Затем при нажатии кнопки мыши на .wrapper, будем включать для .content свойство display: block. Для чего установим для .wrapper:active .content свойство display: block. В таком состоянии .content будет видим только когда кнопка мыши нажата. Если ее отпустить,.content снова исчезнет. Для фиксации сделаем так, чтобы при нахождении курсора мыши над .content, элементу присваивалось свойство display: block. То есть устанавливаем для .content:hover свойство display: block. Код CSS будет иметь вид: 01 .content { 02 display: none; 03 } 04 05 .wrapper:active .content { 06 display: block; 07 } 08 09 .content:hover { 10 display: block; 11 } Остается только "причесать" внешний вид и придать ему наглядности: 01 .wrapper { 02 position: relative; 03 } 04 05 .button { 06 background: yellow; 07 height: 20px; 08 width: 150px; 09 } 10 11 .content { 12 position: absolute; 13 padding-top: 20px; 14 } 15 16 .content li { 17 background: red; 18 } Текст кнопки в выше приведенном коде будет иметь желтый фон, а выводимая по нажатию кнопки мыши информация - красный фон.