Css нажатие на элемент

Большинство из Вас, прочитав заголовок данной статьи, скажут, что обработка события click на CSS невозможна. Однако, это не совсем так. И в данной статье я покажу, как можно обработать событие click с использованием только CSS.

Допустим, у нас есть некая вкладка, кликнув мышкой по которой, должно открыться содержимое этой вкладки. Абсолютное большинство всё это будет делать на JavaScript, но на самом деле, в данном случае, событие click легко обработается через CSS.

Для начала самый обычный HTML-код:

Ничего необычного, разве что название вкладки расположено ниже контента, позже, Вы поймёте почему. А теперь 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, что всегда хорошо.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Читайте также:  Гаджеты для измерения температуры процессора и видеокарты

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 5 ):

    Михаил, спасибо за урок. Очень полезная для меня статья !

    А у меня почему-то не работает ничего, если поставить :hover то всё работает а если :active или :focus то ничего не работает

    Михаил. хорошо бы исправить текст комментария в CSS-коде для строки padding-top. Мы ведь размещаем название вкладки выше содержимого, а не ниже.

    padding-top: 20px; /* Чтобы название вкладки было ниже содержимого */ — не верно, содержимое ниже названия!

    Спасибо за статью, все проверил, отлично работает! Еще классная штука для создания клика без прямого использования JavaScript. OrnaJS. Пример:

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.

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

    Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно.

    В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для "обнаружения" нажатия с помощью только CSS без JavaScript.

    Примечание

    Описанные способы не предназначены для "реальной жизни". Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока — прикоснуться к границам возможностей CSS.

    Используем чекбокс

    Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.

    Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.

    HTML

    CSS

    Метод основан на использовании псевдо-класса :checked и селектора

    . Обратите внимание, что он будет работать и с селектором + . Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.

    Читайте также:  Как определить подлинность смартфона самсунг

    Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:

    Итак, мы прячем чекбокс и используем метку для реагирования на событие click:

    У нас получилась кнопка, нажатие на которую меняет цвет текста в параграфе. Повторное нажатие на кнопку меняет цвет обратно.

    (Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный — применение display:none .)

    Плюсы

    • Бинарный, есть только два состояния — отмечен или не отмечен
    • Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом)
    • Позволяет организовать обработку связанных событий click (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее действие)

    Минусы

    • Элементы должны иметь общего предка
    • Требуется дополнительная разметка HTML (input, label и так далее)
    • Требуется дополнительные действия для работы на мобильных браузерах

    Способ с :target

    Есть другой способ с использованием псевдо-класса :target. Данный псевдо-класс похож на псевдо-класс :hover тем, что соответствует только определенным условиям.

    Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают.

    HTML

    CSS

    При нажатии на ссылку ( href="#id" ) изменяется URL и осуществляется переход по метке #id на странице. В данный момент элемент с идентификатором id может быть выделен с помощью псевдо-класса :target.

    Плюсы

    • Простой код CSS
    • Отлично подходит для выделения разделов

    Минусы

    • Мусор в истории браузера
    • Происходит прокручивание страницы
    • Требуется тег ссылки или операции с URL для включения хэштега
    • Можно воздействовать только на один элемент (так как ID является уникальным)
    • Нет способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL

    Способ с :focus

    Продолжим наш обзор способом с использованием другого псевдо-класса — :focus. Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе.

    Когда вы находитесь на странице, то с помощью клавиши табуляции можно перемещаться от одного элемента к другому. Такой метод очень удобен при работе с формами для перехода между элементами без использования мыши. Также метод применяется для навигации слабовидящими людьми по странице.

    Важно, что некоторые элементы могут получать фокус ввода, например, ссылки, параграфы, поля ввода и многие другие. Вам только нужно установить для них атрибут tabindex с числовым значение для них.

    HTML

    CSS

    Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #.

    Читайте также:  Linux dd команда описание

    Плюсы

    • Очень простой код CSS и HTML
    • Отличная навигация

    Минусы

    • Требуется либо элемент с фокусом, либо атрибут tabindex
    • Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)

    Способ с переходами

    Вероятно, данный метод является самым "грязным" способом обработки события click в CSS.

    Идея заключается в "хранении" стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации.

    HTML

    CSS

    Задержка составляет примерно 116 дней. Не бесконечность, но некое ее подобие для наших условий. Поэтому изменения сохраняются и нет возврата к исходному состоянию.

    Плюсы

    • Просто и изящно
    • Сохраняется состояние, даже если переход не закончился

    Минусы

    • Плохая поддержка в браузерах (нет в IE9 и Opera Mini)
    • Работает только со значениями, которые можно использовать с переходами
    • Нет способов возврата к исходному состоянию
    • Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: tympanus.net/codrops/2012/12/17/css-click-events/
    Перевел: Сергей Фастунов
    Урок создан: 18 Декабря 2012
    Просмотров: 95336
    Правила перепечатки

    5 последних уроков рубрики "CSS"

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

    Раскрывающаяся навигация

    Экспериментальный скрипт раскрывающейся навигации.

    Есть, допустим, один элемент. Каким псевдоклассом можно сделать, чтобы при клике на этот элемент, появлялся border: 1px solid white и оставался на этом элементе, пока я не кликнул на другой? Кажется, при помощи active , но не получается.

    3 ответа 3

    Элементы DIV могут получить фокус, если установить атрибут tabindex.

    Можно через :focus попробовать, но не думаю что этот способ подойдет везде. Тот же jQuery toggleClass(), на мой взгляд, будет надежнее.

    Один из возможных способов — использовать псевдокласс target.

    Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

    Похожие

    Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

    дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.10.35756