Accidental hover on mobile

We use hover effects to provide an indication to the user that an element is clickable or active. That is fine for devices that have a mouse or a trackpad. However, for mobile browsing hover effects can get confusing.

While scrolling in a page, your finger can accidentally do a half-tap which will trigger the hover state of a specific element.

Consider the following figure.

While the user is scrolling, a hover was triggered. At this point, the user didn't mean to do that at all since there is no hover on mobile.

The solution for this is to use the hover media query. It's possible to detect if the user's current input tool (trackpad vs mouse) can hover over elements.

@media (hover: hover) {
    .card:hover {
        /* Add hover styles.. */
    }
}

That way, the hover style will only work when the user is using a tool device like a mouse or a trackpad.