CSS: How to allow the hover state only on devices which support hover?

Question

I was looking for a way to prevent touch devices from "simulating" the hover event. The reason is that you can't hover on touch devices like you can on a desktop with the cursor and this sometimes interfere with the user experience.

Because I didn't found any solutions online I thought I post my own solution here. I hope this will help someone :)

Answer 1

I achieved to only hover on devices which have a real hover state with two media queries.

• The first media query makes sure that the CSS is only executed when the current device has a real hover state. This works in nearly every browser: https://caniuse.com/#feat=css-media-interaction
• The second media query is to support IE11 because the first one isn't supported by IE11 🙄 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast

@media (hover: hover), (-ms-high-contrast:none) {
  div:hover {
    background: red;
  }
}

<div>Hover me!</div>