Media query for devices supporting hover

Question

I\'d like to provide separate behaviour for browsers supporting hover (e.g. desktop browsers) and ones which don\'t (e.g. touchscreen devices). Specifically I want to declar

Answer 1

Thanks to Dekel's comments I solved this by running the logic in JS and applying a class instead:

e.g.

const canHover = !(matchMedia('(hover: none)').matches);
if(canHover) {
  document.body.classList.add('can-hover');
}

Then in the stylesheet:

.myElement {
  background: blue;
}
.can-hover .myElement:hover {
  background: red;
}

I've tested this on desktop Chrome, Safari and Firefox, and iOS Safari and it works as expected.