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

DEMO

Часто в наших проектах нужно привязать определённое действие к действию пользователя. Например при нажатии левой кнопки мыши на определённом диве (блоке) меняется цвет этого блока. Вообще нажатие левой кнопки мыши называется 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 возвращается в изначальное состояние.