Accidental hover on mobile

In the following CSS, the hover style will be
applied only if the user is using a mouse or a
trackpad.

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

Example

/* default hover effect */
a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /* when hover is supported */
  a:hover {
    color: white;
    background: black;
  }
}

Does this device support real hover (like a mouse)?

@media(hover:hover) { }

Now hover styles ONLY apply when:

Better

@media (hover: hover) and (pointer: fine) {
  &:hover {
    background-color: var(--color-gray-100);
  }
}

Why add pointer: fine?

Prevents applying hover styles on: