CSS: How to allow the hover state only on devices

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

查看更多

0人赞 添加讨论(0) 举报