Software Design
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.

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.

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.

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; }}

CSS can be tricky sometimes. Have fun with it!

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

Tech analyst at Accenture. Mobile app and web developer. Passionate about tech and education.