0

I'm trying to prevent the hover effect from firing when I click on an element on my phone's browser. It seems everyone recommends to use the media query for hover to solve this.

I don't understand because this doesn't seem to do anything for me. I'm using the latest Chrome on my new Android phone and when I click on the element the hover effect still runs and the red background gets stuck there.

That is, clicking the following element in this code on my phone causes the red background to get stuck before I click elsewhere to make it go away.

.test {
  background-color: #ddd;
  padding: 10px;
}

@media (hover:hover) {
  .test:hover {
    background-color: #ff0000;
  }
}
<div class="test">
  hover me
</div>

Does anyone know why this is happening? How can I prevent sticky hovers from occurring on mobile?

Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
  • Is your device a Samsung? [This article](https://www.ctrl.blog/entry/css-media-hover-samsung.html) helpfully explains that Samsung phones unfortunately report `hover:hover`. – bjnord Aug 18 '22 at 07:40

1 Answers1

0

It seems to work perfectly for me. @media (hover:hover) only to apply styles on devices with hover capability. So that makes me think your mobile device does support that.

Another trick you can try is something you've probably already tried. Adding a media query with a max-width and giving the .test the same background-color on hover as it originally has.

Example:

@media only screen and (max-width: 600px) {
  .test:hover {
    background-color: #ddd
  }
}

If the screen width is smaller than 600 pixels, the hover has the same background color.

  • I wonder if it's something with my device, because I asked a friend and it worked on his device. Perhaps because I enabled developer mode on my Android? – Ryan Peschel Sep 25 '20 at 19:47