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
handle devices like the Chromebook Pixel (which has both a
touchscreen and a mouse) correctly.
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 like that is possible. Focusing 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?
Once CSS Media Queries Level 4 is implemented, you'll be able to do this:
@media (hover: hover) {
button:hover {
background-color: blue;
}
}
Or in English: "If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when button
s are hovered over."
Since this part of Media Queries Level 4 has so far only been implemented in bleeding-edge Chrome, I wrote a polyfill to deal with this. Using it, you can transform the above futuristic CSS into:
html.my-true-hover button:hover {
background-color: blue;
}
(A variation on the .no-touch
technique) And then using some client-side JavaScript from the same polyfill that detects support for hovering, you can toggle the presence of the my-true-hover
class accordingly:
$(document).on('mq4hsChange', function (e) {
$(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});