React: click triggers hover pseudoclass on mobile views?

Hey campers

I ran into an issue where clicking on an item runs :hover pseudo class for some reason? Can anyone explain this to me?

It’s happening to a check mark/cancel mark of todo cards.

.fiDQKJ img:hover {
  animation: iVXCSc 18s linear 0s infinite normal none running;
}

image

https://put-em-down.netlify.com/

Looks like it has nothing to do with React.

https://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices

And the post linked in SO answers: https://designshack.net/articles/css/are-hover-events-extinct/

hmm ok I didn’t read everything but is the best way just getting rid of :hover on mobile phones and tablets using media queries?

From that second link:

As far as I’m concerned, the answer is a resounding “yes,” although that comes with several stipulations.

1 Like