Answer the question
In order to leave comments, you need to log in
How to implement support for hover effects on touch devices?
Good afternoon!
We are making a website, the main page has navigation with :hover effects, but of all the touch devices available to me, only the iphone works correctly with hover. On the Samsung Galaxy Tab tablet, when you tap on a link, the browser tries to play the animation from hover and immediately follows the link.
How to make hover effects work correctly on all touch devices?
Thank you.
Answer the question
In order to leave comments, you need to log in
:Hover is no longer worth using as some important UI feature precisely because of mobile devices
So I'm asking how to achieve a hover effect on touch devices, while only a double click comes to mind. Those. on the first click only animation, on the second click on the link.
I noticed that on two android devices in the browsers Google Chrome and Yandex.Browser hover comes after clicking on the element. If the element does not react on click, but only on hover, it will work. Not sure if this is the case on all systems and all browsers.
I assume the following is happening (this is a hypothesis, may be wrong):
The touch device has a cursor in the browser, but it is not displayed. When you click somewhere, the cursor is placed at those coordinates and stays there. Accordingly, the elements under the cursor consider that they have been hovered over, and the hover works on them.
But if you want the element to respond to both hover and click, then it was rightly said above that you want to break the UX literacy. That is, you are solving the wrong problem. So, it is worth setting another task, at a higher level: how to enable the user to interact with one element in two ways. But it depends on the nature of the interaction. If you just want to be beautiful on hover, then it will not be on the touch screen. If you want a hint to pop up or something to come out, make an icon or button next to it that will do it. And don’t touch the click on the main element, don’t break the UX.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question