Есть ли способ обрабатывать события click на CSS без использования JavaScript. Можно использовать метод с :target. Но что если его нельзя использовать? Есть другой метод.
Посмотрите демонстрацию. Она полностью выполнена на CSS, ни строчки кода JavaScript. В основе лежит оригинальное использование селекторов :active и :hover.
Описание
Сначала нужно создать контейнер, который будет содержать кнопку и блоки, выводимые по нажатию мыши. Структура разметки будет примерно такой:
<div class="wrapper">
<div class="content">
<li>Lorem ipsum dolor sit amet.</li>
<li>Consectetur adipiscing elit.</li>
</div>
<div class="button">Кнопка</div>
</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 будет иметь вид:
.content {
display: none;
}
.wrapper:active .content {
display: block;
}
.content:hover {
display: block;
}
Остается только "причесать" внешний вид и придать ему наглядности:
.wrapper {
position: relative;
}
.button {
background: yellow;
height: 20px;
width: 150px;
}
.content {
position: absolute;
padding-top: 20px;
}
.content li {
background: red;
}
Текст кнопки в выше приведенном коде будет иметь желтый фон, а выводимая по нажатию кнопки мыши информация - красный фон.