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

[WKTP]

День добрый!

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

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

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

Спасибо...

 

[$_Maclay]

Здравствуйте!

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

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

Используйте в мобильной версии :active. Эффект будет лишь в момент контакта с кнопкой.

 

[vud1k]

И обратите внимание на порядок, если будете использовать :hover и :active вместе.
Пример Для просмотра ссылки Войди или Зарегистрируйся