How to remove or ignore :hover CSS style on touch devices?

Spread the love

Sometimes, we want w to remove or ignore :hover CSS style on touch devices.

In this article, we’ll look at how to remove or ignore :hover CSS style on touch devices.

How to remove or ignore :hover CSS style on touch devices?

To remove or ignore :hover CSS style on touch devices, we can set theg styles for hover on non touch devices.

For instance, we write

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: red;
  }
}

to set the hover style of links when hovered to red.

pointer: fine targets fine pointing devices like a mouse.

Conclusion

To remove or ignore :hover CSS style on touch devices, we can set theg styles for hover on non touch devices.

Leave a Reply

Your email address will not be published.