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