How to correctly deal with :hover when adapting?

Question

css

I took a tablet in my hands and realized that the layout is more than completely messed up - all buttons, links and any other elements that have :hover, freeze in the hover state when you click on them.
And somehow the thought that you have to write another thousand lines of code in order to neutralize all the hovers is very scary.
Is there any easy way?

Answer 1

if I'm not mistaken on touch screens, I have no idea even about the hover effect, just click

Answer 2

It is better to rewrite, you can try to prescribe a common style and set it to !important (on top of all styles).

Answer 3

Everything is simple there.
On touch devices, some browsers (perhaps even all) handle the hover in such a way that it retains its display style until something else is clicked.
You can solve the problem either through javascript, determining the browser type, or by performing more complex calculations, catching ontouchstart type events on the body and redefining the styles for the hover (you can take into account hybrid devices with a mouse and a touch screen, but then you have to return styles for the hover tracking onmousedown is acceptable)
Or write all hovers in media queries via css so that, for example, they work only if the device screen width is at least 1280 pixels (min-device-width: 1280px)
Это значение охватывает 95 процентов всех устройств, оставляя за бортом несколько моделей здоровых планшетов и гибридные ноутбуки с тач экраном (лично я считаю что нельзя все оптимизировать идеально, ибо нет предела совершенства, поэтому делаем как с древними браузерами - добиваемся хорошей работы на массовых системах, а все экзотическое пусть работает без свистелок, ховеров и градиентов)