Some touch devices support hovering which can cause unwanted behaviour when working with responsive web apps that are accessed from both desktop and mobile devices and that are intended to behave differently when accessed from dito devices. This snippet shows how to disable hover for touch devices using a simple media query and css preprocessing.

See the following Stack Overflow question for a reference.

MDN web docs state that:

The pointer CSS @media feature can be used to apply styles based on whether the user's primary input mechanism is a pointing device, and if so, how accurate it is

What I discovered is that pointer: coarse is something that is unknown to all desktop browsers tried but known to all mobile browsers tried. This seems to be most effective choice because all other pointer keyword values give inconsistent results.

Hence you could construct a media query. It makes use of a reversed logic to rule out all touch devices. Try it out with this code pen.


791 2 0