CSS Hover: Targeting Mouse Input and Ignoring Touch Input

CSS hover states are pretty obviously targeted at mouse inputs, but are applied in strange ways to touch inputs as well. Thankfully, all modern browsers now support input-based media queries. This allows us to apply our hover states only to devices that truly support hover states.

Here is the code that makes it work:

@media(hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration: underline;
	}
}

This insures that the CSS inside the media query is only applied if hover states are supported and a fine pointer is in use (for example, a mouse) as opposed to a course pointer (for example, a touchscreen).

For more detailed info, check out this article where I learned about this method: https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

Posted in

Leave a Comment

Your email address will not be published.