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);
});