:focus на мобільних пристроях

9 червня 2022 р.178

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

Треба враховувати, що фокус можуть отримати не всі елементи веб-сторінки, лише посилання, кнопки, поля форми. Щоб змусити працювати :focus для, скажімо, зображень, треба додати до них атрибут tabindex дозволяє переходити до зображень за допомогою клавіші Tab. Як значення вказуються цілі числа, перехід походить від елемента з меншим значенням до елемента з великим значенням.

У прикладі 1 додано три <img>, при клацанню по картинці відбувається збільшення масштабу через властивість transform. Варто клацнути по іншій картинці або вільному місцю веб-сторінки, як зображення повертається до вихідного розміру. 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.

Див. також