How to prevent sticky hover effects for buttons on touch devices
Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use 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."
For browsers that do not have this implemented (or didn't at the time of this original answer), 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);
});
You can remove the hover state by temporarily removing the link from the DOM. See http://testbug.handcraft.com/ipad.html
In the CSS you have:
:hover {background:red;}
In the JS you have:
function fix()
{
var el = this;
var par = el.parentNode;
var next = el.nextSibling;
par.removeChild(el);
setTimeout(function() {par.insertBefore(el, next);}, 0)
}
And then in your HTML you have:
<a href="#" ontouchend="this.onclick=fix">test</a>