Sometimes, we want to prevent sticky hover effects for buttons on touch devices with CSS.

In this article, we’ll look at how to prevent sticky hover effects for buttons on touch devices with CSS.

How to prevent sticky hover effects for buttons on touch devices with CSS?

To prevent sticky hover effects for buttons on touch devices with CSS, we can use the hover media query.

For instance, we write

@media (hover: hover) {
  button:hover {
    background-color: blue;
  }
}

to apply styles for the hover media query.

We set buttons’ background color to blue if we’re hovering on a touch screen by using the media query.

Conclusion

To prevent sticky hover effects for buttons on touch devices with CSS, we can use the hover media query.