Don't show hover state on touch devices

Question

Is this possible? Short of converting all my hover styles into mouseover listeners is it possible to stop a touch device from triggering the CSS hover state?

I have an application that must work on both touch and pointer input, it works great but certain styles applied on hover just don't make sense on touch devices because they tend to retain the hover state indefinitely after a user has tapped an object.

Things to take into account:

• Device width bears no correlation with touch enabled devices to me, the touch screens we are using here are desktop size monitors.

• I don't want to force a user to input via touch on a multi-input device.

Answer 1

I had solved this problem following the approach shared in the link in the comments above. If you're not using it, consider using Modernizr in this scenario. Would like to hear some other approaches as well...

As user, Blender mentions, you can check against touch events like so:

html.touch {
  /* Touch Device ~ No Hovers */
}

html.no-touch {
  /* Not a Touch is disabled */
}
html.no-touch .element:hover {
   opacity:.5;
}