Июль
Click средствами CSS


Часто в наших проектах нужно привязать определённое действие к действию пользователя. Например при нажатии левой кнопки мыши на определённом диве (блоке) меняется цвет этого блока. Вообще нажатие левой кнопки мыши называется click. Для обработки этого события в основном используется javascript и jquery, но так же есть возможность и с помощью css клик отследить. Об этом мы и поговорим в данном посте. Возникает конечно законный вопрос, зачем ослеживать средствами css click, всё прекрасно работает и с помощью javascript. Но если в браузере пользователя js отключен, то функционал сайта будет не полный, а клик css будет работать всегда. Есть несколько методов обработать событие клик css. Первый из них "checked"
Метод "checked"
Для начала напишем html и css код.
<input type="checkbox" id="onclick"> <div class="butt1"><label class="click" for="onclick">click me</label></div> <div class="box"> <div class="noncheck1"><p>Если фон красный то чекбокс выбран</p></div> <div class="check"><p>Чекбокс выбран</p></div> </div>
.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{/*кнопка*/ font-size: 23px; display: block; } input{/*скрываем чекбокс*/ display: none; } input:checked ~ .box .noncheck1{/*скрываем верхний слой при чекед, виден средний слой-текст и нижний слой*/ display: none; }
Давайте разберёмся с кодом. У нас три блока .box, .noncheck1, .check. Все они спозиционированны относительно друг друга так что, блок .check находится под .noncheck1. CSS кнопок не стал выкладывать в листинг так как он не важен. И вот начинаем разбираться с методом "checked". Метод основан на использовании элемента checkbox и его атрибута checked. Мы нажимаем на чекбокс и его состояние переходит в чекед. К этому событию с помощью селекторов css "~" или "+" мы привязываем изменение чего либо. Например изменение цвета текста или фона определённого элемента. В примере мы выбираем чекбокс и в диве .box див .noncheck1 становится невидимым ( display: none), мы можем видеть див .check. Для того, что бы оформить переключатель состояния фона в виде кнопки мы присваиваем нашему чекбоксу label и уже из него создаём кнопку. Теперь нам чекбокс не нужен (у нас есть кнопка) и мы его скрываем ( display: none)
Метод "target"
<div class="butt2"><a href="#On">On</a></div> <div class="butt3"><a href="#Off">Off</a></div> <div class="box"> <div id="On" class="noncheck2"><p>Off</p></div> <div class="check"><p>On</p></div> </div>
.noncheck2:target{ display: none; }
Метод таргет работает по такому принципу. Мы создаём кнопку .butt2 с сылкой <a href="#On">On</a>. В ссылке мы назначаем хэш тег "#On". При нажатии на ссылку в виде кнопки с хэштегом происходит переход к диву с id="On". Этот див попадает в target. Происходит активация псевдокласса target. У нас на это событие повешено скрытие дива .noncheck2 так же за счёт display: none. При нажатии на другую ссылку-кнопку див уходит из таргета, так как таргет переходит на другой блок. Див .noncheck2 опять появляется.
Mетод "tabindex"
<div class="butt4" tabindex="1">On</div> <div class="butt5" tabindex="2">Off</div> <div class="box"> <div class="noncheck3"><p>Off</p></div> <div class="check"><p>On</p></div> </div>
.butt4:focus ~.box .noncheck3 { display: none; }
Данный метод основан на использовании атрибута tabindex. Он заключается в том, что некоторым элементам вебстраницы мы можем с помощью tabindex задать фокус ввода. Элемент получает событие focus (.butt4:focus) , которое можно обработать средствами css. Мы используя селектор соседей "~" назначаем элементу .noncheck3 состояние display: none, когда у нас происходит событие .butt4:focus. Когда у нас фокус переходит с кнопки на другой элемент страницы .noncheck3 возвращается в изначальное состояние.