Псевдокласс :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.
Рис. 1. Масштабирование картинок при получении фокуса
Чтобы :focus работал для <img>, к ним добавлен атрибут tabindex, что к тому же позволяет переходить от одной картинке к другой через клавишу Tab.
Автор: Влад Мержевич
Последнее изменение: 11.03.2020