Accidental Hover On Mobile

In the app, we use the hover effect to provide users with hints that an element is clickable or active. This works well on devices with a mouse or touch panel, but on mobile devices, the hover effect can be confusing.

.card:hover {
  background: blue;
}

When scrolling in the page, your finger may accidentally tap halfway, which will trigger the hover state of a specific element.

If it is a desktop browser, please open the console and switch to mobile devices. Click on the element below to see the hover effect.

This accidental triggering of the hover state may not be what the user wants to see. After all, hover is not needed on mobile devices.

In this regard, we can use the hover media query to solve this problem. Detect whether the user's current device can hover the mouse pointer over the element.

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

If it is a desktop browser, please open the console and switch to mobile devices. Click on the element below.

You can see that in the desktop browser, the hover effect is activated, and in the mobile browser, the hover effect is not triggered.