:focus на мобильных устройствах
Псевдокласс :hover в сочетании со свойством transition часто применяется для создания различных анимационных эффектов при наведении курсора мыши на элемент. На мобильных устройствах :hover по понятным причинам не работает — там нет курсора, а взаимодействие происходит касанием пальца. Поэтому для создания эффектов заменим :hover на :focus.
Надо учитывать, что фокус могут получить не все элементы веб-страницы, а только ссылки, кнопки, поля формы. Чтобы заставить работать :focus для, скажем, изображений, надо добавить к ним атрибут tabindex — он позволяет переходить к изображениям через клавишу Tab. В качестве значения указываются целые числа, переход происходит от элемента с меньшим значением к элементу с большим значением.
В примере 1 добавлено три <img>, при щелчке по картинке происходит увеличение масштаба через свойство transform. Стоит щёлкнуть по другой картинке или свободному месту веб-страницы, как изображение возвращается к исходному размеру.
Пример 1. Масштабирование картинок при фокусе
Результат данного примера показан на рис. 1.
Рис. 1. Масштабирование картинок при получении фокуса
Чтобы :focus работал для <img>, к ним добавлен атрибут tabindex, что к тому же позволяет переходить от одной картинке к другой через клавишу Tab.
См. также
- :focus для полей формы
- transform
- transition
- Виды ссылок
- Всплывающая подсказка
- Использование :hover
- Несколько псевдоэлементов
- Нормальное позиционирование
- Переходы
- Переходы и анимация
- Переходы с помощью :hover
- Повёрнутые рамки
- Подсветка строк и колонок таблицы
- Псевдокласс :focus
- Псевдокласс :focus-within
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Сочетание с псевдоклассами
- Трансформация
- Трансформация
- Трансформация в CSS
- Функции трансформации