Photo by UX Store on Unsplash

Handle :hover CSS on mobile touch screen

If you are working on CSS and want to be able to handle hover on desktop view, but wan’t to avoid any changes on mobile touch, I got you.

I spent too much time trying to figure this out, so I am writing a quick article for anyone who wants to implement this.

Background

In CSS, you can define :hover, which will trigger any styling changes when the user hovers the mouse on the item which you have tagged.

Problem

The problem for me was that it was also registering a hover when a user would touch the component on their phone. I didn’t want this to happen on the mobile screen.

Solution

This is what I did to fix it:

I changed this:

a:hover {
  background-color: red;
  color: white;
}

to this:

@media (hover: hover) {
  a:hover {
  background-color: red;
  color: white;
 }
}

Conclusion

CSS can be tricky sometimes. Have fun with it!

If this helped you, give this article a clap! Comment with any questions.