CSS :hover background на смартфонах

Статус
В этой теме нельзя размещать новые ответы.

WKTP

Постоялец
Регистрация
5 Сен 2013
Сообщения
53
Реакции
7
День добрый!

Есть сайт, на Opencart 3.x, в карточке товара кнопка "Купить".
Наведя или нажав на нее она меняет цвет как прописано в стилях css .btn background: red; и .btn:hover background: blue;, отводим или после того как нажмем на нее она возвращает свой цвет!

Но если нажать к примеру в iPhone(chrome) на эту же кнопку, цвет не возвращается, остается синий!
Если нажать радяшком цвет становится "Красный"

Как и что прописать что бы возвращался цвет?

Спасибо...
 
Здравствуйте!

Это происходит потому что :hover конкретно на сенсорных экранах не чувствителен к удержанию, работает по клику.

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

Используйте в мобильной версии :active. Эффект будет лишь в момент контакта с кнопкой.
 
  • Нравится
Реакции: Didi
И обратите внимание на порядок, если будете использовать :hover и :active вместе.
Пример Для просмотра ссылки Войди или Зарегистрируйся
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху