Hover states should show on press and hold on mobile
Allow hover states to activate on mobile when you hold down on the button.
As a UI design I've been wanting this for a while and wished it came to the app! I think this will benefit all of us
Anonymous
shared this idea
-
Job Ballard commented
This seems quite straight forward to me... and it would instantly make experiences better everywhere...
-
Simon Villaeys
commented
Game changer
-
Marketing Dartfish commented
I totally agree. I came here to learn how to do it and I just realized this feature isn't integrated. Giving user a feedback to each of his action is crucial. It is now become a widely used practice to integrated a specific state for every button that are pressed-and-holder.
-
Ervin Jason
commented
I have created a carousel with a previous and a next button that are always visible. These buttons have a hover state, they turn blue. On touch devices, like iPad, the hover state is sticky, so the button stays blue after tapping it. I don't want that.
I could add a 'no-hover' class ontouchend for each button, and make my CSS like this: button:not(.no-hover):hover { background-color: blue; } But that's probably quite bad for performance, and doesn't treat devices like the Chromebook Pixel (which has both a touchscreen and a mouse) right.
I could add a 'touch' class to the documentElement and make my CSS like this: html:not(.touch) button:hover { background-color: blue; } But that also doesn't work right on devices with both touch and a mouse.
What I would prefer is removing the hover state ontouchend. But it doesn't seem that is possible. Focussing another element doesn't remove the hover state. Tapping another element manually does, but I can't seem to trigger that in JavaScript.
All the solutions I have found seem imperfect. Is there a perfect solution?