0

When tapping on a div in ios (safari and chrome), the hover pseudo class kicks in and persists even after the finger is lifted.

It's worth noting, that the user doesn't have to hold down to trigger this effect. Just a simple tap will cause the hover pseudo class to persist.

Is there a way to stop this by happening with pure css?

Fiddle

Pseudo-class:

.hover-div:hover {
    background-color: cornflowerblue;
    color: whitesmoke;
    border-color: dodgerblue;
}
Smeegs
  • 9,151
  • 5
  • 42
  • 78
  • Sorry, yeah, have you tried :focus? – ajmajmajma Apr 30 '15 at 14:33
  • Focus doesn't really meet my needs, I only want it to change on hover. I believe focus is just for input elements anyway. – Smeegs Apr 30 '15 at 14:34
  • How does one hover with touch though? – ajmajmajma Apr 30 '15 at 14:37
  • This site won't only be accessed by touch devices. – Smeegs Apr 30 '15 at 14:43
  • 2
    Yeah, I just mean hover isn't really a state for mobile, you don't hover your finger over, you touch (or don't touch). I know you're looking for a css only way, but I would really recommend a little js in this case, you're already using jquery. You can do something like if ('ontouchstart' in document) { or whatever, there are tons of ways. – ajmajmajma Apr 30 '15 at 14:47
  • The jquery is just for the fiddle for logging tap events. It's not feasible to use for my needs. The fiddle I created is to easily replicate the behavior. It's not an accurate representation of production code. – Smeegs Apr 30 '15 at 14:49
  • @ajmajmajma, ah. I think I understand your confusion. I'm not trying to get hover working for mobile. I don't want it to ruin the mobile user experience. By showing and sticking. – Smeegs Apr 30 '15 at 15:01
  • Try messing with pointer-events :none then, would still have to target for only mobile. – ajmajmajma Apr 30 '15 at 15:36

0 Answers0