Обработка события click на CSS
Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события click на CSS невозможна. Однако, это не совсем так. И в данной статье я покажу, как можно обработать событие click с использованием только CSS.
Допустим, у нас есть некая вкладка, кликнув мышкой по которой, должно открыться содержимое этой вкладки. Абсолютное большинство всё это будет делать на JavaScript, но на самом деле, в данном случае, событие click легко обработается через CSS.
Для начала самый обычный HTML-код:
<div class="tabs">
<div class="content">Содержимое 1</div>
<div>Вкладка 1</div>
</div>
<div class="tabs">
<div class="content">Содержимое 2</div>
<div>Вкладка 2</div>
</div>
Ничего необычного, разве что название вкладки расположено ниже контента, позже, Вы поймёте почему. А теперь CSS-код:
.tabs {
float: left; /* Все вкладки располагаем в одну строку */
margin: 10px; /* Отступы вкладок друг от друга */
}
.content {
display: none; /* Скрываем содержимое */
padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */
position: absolute; /* Чтобы содержимое не двигало элементы на странице */
}
.tabs:active .content {
display: block; /* Когда кликаем по вкладке, открываем содержимое content */
}
.content:hover {
display: block; /* Пока курсор наведён на контент, не закрываем его */
}
Алгоритм следующий, при клике по названию вкладки, автоматически срабатывает псевдоэлемент active, но поскольку он будет работать только при нажатой клавиши, то стоить нам отпустить, как контент закроется. Чтобы этого не было, мы добавляем условие, что если курсор наведён на контент (псевдоэлемент hover), то он не будет закрываться. А для того, чтобы кликнув по вкладке, наш курсор автоматически оказался бы и на контенте, мы и расположили кнопку ниже контента, а также сделали ещё и поле сверху. Таким образом, кликнув по названию вкладки, мы кликаем и по контенту тоже, поэтому после клика мы можем смело отпустить кнопку мыши, и у нас продолжит "держать" контент наведение курсора.
Данный алгоритм можно использовать для простых вкладок, а также для выпадающих по клику меню. Теперь, надеюсь, Вы подобные задачи будете решать без использования JavaScript, что всегда хорошо.
-
Создано 17.10.2012 07:38:03
-
Михаил Русаков
Комментарии (5):
Михаил, спасибо за урок. Очень полезная для меня статья !
Ответить
А у меня почему-то не работает ничего, если поставить :hover то всё работает а если :active или :focus то ничего не работает
Ответить
Михаил. хорошо бы исправить текст комментария в CSS-коде для строки padding-top. Мы ведь размещаем название вкладки выше содержимого, а не ниже.
Ответить
padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */ - не верно, содержимое ниже названия!
Ответить
Спасибо за статью, все проверил, отлично работает! Еще классная штука для создания клика без прямого использования JavaScript. OrnaJS. Пример: <div class=" bgc_red_click "> http://ornaorg.github.io
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.