Site memory

Обработка события click средствами CSS

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

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

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

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

Примечание

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

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

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

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

 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < color: black; >input[type=checkbox]:checked ~ .to-be-changed

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

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

 Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

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

input[type=checkbox] < position: absolute; top: -9999px; left: -9999px; >label < display: block; background: #08C; padding: 5px; border: 1px solid rgba(0,0,0,.1); border-radius: 2px; color: white; font-weight: bold; >input[type=checkbox]:checked ~ .to-be-changed

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

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

Плюсы

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

Минусы

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

Способ с :target

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

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

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < color: black; >.to-be-changed:target

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

Плюсы

Минусы

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

Способ с :focus

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

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

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

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

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

Плюсы

Минусы

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

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

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

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

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < transition: all 0s 9999999s; >span:active ~ .to-be-changed

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

Плюсы

Минусы

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

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

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

• 

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

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

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

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

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

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

Источник

При нажатии на ссылку вместо одного div должен появится другой. Как реализовать?

Всем привет! Помогите пож. на конкретном примере реализовать следующую задачу: при нажатии на ссылку (.btn-search) вместо блока (.b-content_actions) должен появится другой блок (условно .b-content_actions2). И, следовательно, при закрытии нового блока на его место должен вернуться предыдущий. Вот фрагмент кода. Заранее спасибо!

       
 
 
 
 
 
Search 
 
 
 
 
Registration 
 
Log in 
 
 
 
 
  
 
 
 
Text1
 

      Cсылка 
 
Это Блок 1
 
 
Это Блок 2
 Закрыть блок 
 
  

.block < width: 200px; height: 200px; position: relative; border: 1px solid #000; >#one < background: #eee; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; >#two < background: #444; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; color: #fff; >#one:target > #two < display: none; >#two < display: none; >#two:target < display: block; >#two a

Что бы конкретно с вашим кодом это сделать, обращайтесь в Скайп, ВК, или Телефон. за небольшое вознаграждение сделаем

Спасибо всем за ответы! Оба ответа подходят и оба хороши. Но есть вопросы по нагрузке на сайт и, конечно же, по совместимости с IE. вариант на чистом css будет быстрее?

Вариант l2p он не исправен, по нажимайте много раз на кнопку search..
На счет ИЕ, если вы делаете кроссбраузерно, то вам хочешь — не хочешь придется подключать костыль selectivizr.js

Selectivizr — библиотека, написанная на JavaScript, которая реализует поддержку псевдо-классов, псевда-элементов и селкторов стандартов CSS 2.1 и CSS 3 для браузеров Internet Explorer 6-8: [attr], [attr=], [attr~=], [attr|=], [attr^=], [attr$=], [attr*=], :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :empty, :enabled, :disabled, :checked, :hover, :focus, :target, :not, :root, ::first-line, ::first-letter

Впринцепи у меня все проекты с этим костылем, и работает, не когда не заморачиваюсь

Артур pro: действительно, вариант Вариант l2p неисправен. давайте обсудим все детали в скайпе, я вам напишу в скором времени.

Источник

Другой css при нажатии

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

• 

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

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

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

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

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

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

Источник

Click средствами CSS

Часто в наших проектах нужно привязать определённое действие к действию пользователя. Например при нажатии левой кнопки мыши на определённом диве (блоке) меняется цвет этого блока. Вообще нажатие левой кнопки мыши называется click. Для обработки этого события в основном используется javascript и jquery, но так же есть возможность и с помощью css клик отследить. Об этом мы и поговорим в данном посте. Возникает конечно законный вопрос, зачем ослеживать средствами css click, всё прекрасно работает и с помощью javascript. Но если в браузере пользователя js отключен, то функционал сайта будет не полный, а клик css будет работать всегда. Есть несколько методов обработать событие клик css. Первый из них «checked»

Метод «checked»

Для начала напишем html и css код.

 
click me
 
Если фон красный то чекбокс выбран
 
Чекбокс выбран
 
 

.box < width: 200px; height: 100px; background-color: crimson; position: relative; z-index: -10;/*делаем самым нижним слоем*/ margin: 0 auto; margin-top: 50px; >.noncheck1, .noncheck2, .noncheck3 < width: 200px; height: 100px; display: block; position: relative; background-color: lightgrey; z-index: 10px;/*самый верхний слой*/ >.check < width: 200px; height: 100px; display: block; position: absolute;/*благодаря абсолютн. позиц. смещён под верхний слой*/ top: 1px; left: 1px; z-index: -1;/*средний слой*/ >label input input:checked ~ .box .noncheck1 

Давайте разберёмся с кодом. У нас три блока .box, .noncheck1, .check. Все они спозиционированны относительно друг друга так что, блок .check находится под .noncheck1. CSS кнопок не стал выкладывать в листинг так как он не важен. И вот начинаем разбираться с методом «checked». Метод основан на использовании элемента checkbox и его атрибута checked. Мы нажимаем на чекбокс и его состояние переходит в чекед. К этому событию с помощью селекторов css «~» или «+» мы привязываем изменение чего либо. Например изменение цвета текста или фона определённого элемента. В примере мы выбираем чекбокс и в диве .box див .noncheck1 становится невидимым ( display: none), мы можем видеть див .check. Для того, что бы оформить переключатель состояния фона в виде кнопки мы присваиваем нашему чекбоксу label и уже из него создаём кнопку. Теперь нам чекбокс не нужен (у нас есть кнопка) и мы его скрываем ( display: none)

Метод «target»

Метод таргет работает по такому принципу. Мы создаём кнопку .butt2 с сылкой On. В ссылке мы назначаем хэш тег «#On». При нажатии на ссылку в виде кнопки с хэштегом происходит переход к диву с . Этот див попадает в target. Происходит активация псевдокласса target. У нас на это событие повешено скрытие дива .noncheck2 так же за счёт display: none. При нажатии на другую ссылку-кнопку див уходит из таргета, так как таргет переходит на другой блок. Див .noncheck2 опять появляется.

Mетод «tabindex»

Данный метод основан на использовании атрибута tabindex. Он заключается в том, что некоторым элементам вебстраницы мы можем с помощью tabindex задать фокус ввода. Элемент получает событие focus (.butt4:focus) , которое можно обработать средствами css. Мы используя селектор соседей «~» назначаем элементу .noncheck3 состояние display: none, когда у нас происходит событие .butt4:focus. Когда у нас фокус переходит с кнопки на другой элемент страницы .noncheck3 возвращается в изначальное состояние.

Источник