:focus на мобильных устройствах

Псевдокласс :hover в сочетании со свойством transition часто применяется для создания различных анимационных эффектов при наведении курсора мыши на элемент. На мобильных устройствах :hover по понятным причинам не работает — там нет курсора, а взаимодействие происходит касанием пальца. Поэтому для создания эффектов заменим :hover на :focus.

Надо учитывать, что фокус могут получить не все элементы веб-страницы, а только ссылки, кнопки, поля формы. Чтобы заставить работать :focus для, скажем, изображений, надо добавить к ним атрибут tabindex — он позволяет переходить к изображениям через клавишу Tab. В качестве значения указываются целые числа, переход происходит от элемента с меньшим значением к элементу с большим значением.

В примере 1 добавлено три <img>, при щелчке по картинке происходит увеличение масштаба через свойство transform. Стоит щёлкнуть по другой картинке или свободному месту веб-страницы, как изображение возвращается к исходному размеру.

Пример 1. Масштабирование картинок при фокусе

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:focus</title> <style> div { display: inline-block; /* Строчно-блочный элемент */ overflow: hidden; /* Обрезаем содержимое за пределами блока */ } div img { display: block; /* Убираем отступ снизу */ transition: 1s; /* Переход 1 секунда */ } div img:focus { transform: scale(1.2); /* Увеличиваем картинку */ } </style> </head> <body> <div><img src="image/thumb1.jpg" alt="" tabindex="1"></div> <div><img src="image/thumb2.jpg" alt="" tabindex="2"></div> <div><img src="image/thumb3.jpg" alt="" tabindex="3"></div> </body> </html>

Результат данного примера показан на рис. 1.

Масштабирование картинок при получении фокуса