: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.

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