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?
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?
https://alightmotionapk.co/