Правильный :hover
Если вы стилизуете ховер через CSS, то у меня для вас новости.
Почему? Да потому что ховер это состояние элемента, над которым занесли поинтер (курсор мыши). Очевидно, что смартфон не знает, над каким элементом висит палец пользователя.
Я не знаю, где была логика разработчиков мобильных браузеров, но почему-то они решили включать стили ховера при нажатии на элемент. Проблема в том, что нажатие на элемент на тачскрине приводит к зависанию стилей в состоянии ховера. Как это выглядит: пользователь делает тап по кнопке, а она начинает гореть так, будто на неё навели курсор. И это состояние сохраняется до следующего тапа или скролла.
В современном вебе таких гадостей быть не должно, а интерактивные элементы должны вести себя также, как и в нативных приложениях.
Что делать?
В CSS есть специальная фича — Interaction media features. Это медиа-запрос, который определяет может ли пользователь наводиться на элементы и использует ли он точный (мышь или стилус) или неточный (палец) поинтер. Пример:
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) { /* ... */ }
/* stylus-based screens */
@media (hover: none) and (pointer: fine) { /* ... */ }
/* Nintendo Wii controller, Microsoft Kinect */
@media (hover: hover) and (pointer: coarse) { /* ... */ }
/* mouse, touch pad */
@media (hover: hover) and (pointer: fine) { /* ... */ }Если у вас SCSS, то напишите пожалуйста себе миксин.
А вот пользователям Tailwind 3+ ничего писать не надо: там коробки есть фича-флаг, который делает всё по красоте:
// tailwind.config.js
module.exports = {
future: {
hoverOnlyWhenSupported: true,
},
// ...
}***
Понравилась статья? Подпишитесь на мой канал, там я пишу про фронтенд, крипту и лайфстайл.