Убираем hover баг на мобильных устройствах

На планшетах и мобильных телефонах нет события hover, однако при работе с тачскрином стилизация эффекта наведения курсора мыши отрабатывает при выборе элемента, причем ведет себя некорректно. Разбираемся, как с помощью медиа запросов исправить подобное поведение.

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[romankrytski]

Уже 3-ий раз спасает твой видос. Радует моментальность получения инфы, вместо стаковерфловов и гуглов. Помню что есть твоя запись - 30 сек не прошло, и уже знаю, как задачу решить)

[bassboosted]

Это не баг, это называется костыль. И в вебе во всем так. Сплошной веб это костыль с момента его появления

[dontart]

Ехал ховер через ховер. Видит ховер: ховер, ховер. Сунул ховер ховер в ховер - ховерховерховерховер.

[romankrytski]

Как же кайфово, когда неделю назад увидел эту фичу, сейчас она тебе понадобилась, помнишь у кого искать, глянул и поставил себе.
Спасибо =3

[ArtyemSavchenko-rus]

Классная фича. Я ещё -webkit-tap-highlight-color: transparent прописываю, чтобы дефолтная подсветка тапа не появлялась, и стилизую :active состояния.

[MrSuiting]

В IE3 и Netscape Navigator будет работать?

[LenurAzizov]

А сталкивались ли вы с проблемой на touch iOS устройствах, когда при попытке тапнуть по ссылке, она сначала применяет свой hover эффект и только после вторго тапа позволяет перейти по ссылке?

[yulya_vyazulya]

А можно как то просто отключить все ховеры на тач экранах? Если я не хочу перезаписывать эффекты всем элементам

[ilyalakhno]

Я использовал медиа запрос pointer: fine

[Goddamn_Right]

Не знаю, как на остальных смартфонах, но видимо мой поддерживает hover, так как при использовании hover только в медиазапросе (hover: hover) он отрисовывается и баг с "залипанием" фона остается. Выше в комментах писали про (pointer: fine) - вот это работает, как надо!
@media (pointer: fine) {
Для десктопа
}
@media (pointer: coarse) {
Для смартфона
}

[timur.shhhhh]

Интересный факт, hower есть на ПК и Android. Это связанно с тем, что андройд = линукс, а ios это отдельная ОС

[oleg-medovikov]

что такое ховер? я 3 раза пересмотрел - так и не понял, в чем разница между до и после.

[asdasd-ceiz]

у некоторых людей действительно такие задачи? тестирование компонента ккардиона как на видео, это сурьезно где то происходит?

[_ilunchik_]

Прикол в том, что на vue такое не срабатывает

[varjet]

самсунг телефоны, не поддерживает такой медиа запрос

[СергейСульженко-фя]

Но если десктоп начинается с 1024px то почему бы не написать
@media (width > 1024px) {
. button:hover {}
}
Все время использую и все гуд)

[belousovNi]

На andorid это не работает. Не тратьте время

[Антоун-цт]

а в чем проблема убрать ховер обычным медиа запросом, по ширине экрана? он там нафиг не нужен. Это тач, ты и так видишь, что клик сработал - меню раскрылось. Либо ты переходишь на другую страницу и dom обновляется.

[lesters]

ну по идее можно также в медиазапрос для десктопа только прописать ховер, все что ниже прописать как мобилку.

[catbarsic]

Никогда не фиксил этот баг, так как он абсолютно ни на что не влияет. Те кто фиксят такое просто теряют время которое можно потратить на то что реально влияет на пользовательский опыт и приносит пользу бизнесу