0

I have a text link that, when hovered, triggers an animation on the link itself and a different animation behind it. On the same text link, I have a different animation that runs only when clicked. It's an outro animation before loading a page on another site. Everything works fine on non-touchscreens. The hover animations work on hover and the .active and.focus animations work on click. On touchscreens, (tested in Firefox, Chrome, Safari on iphone and ipad mini), tapping the screen triggers the hover animations (which never stop), but ignores the "click/tap" (a.k.a. .active/.focus) animations. I've stalled the loading of pages to give my outro animation time to run, but on touchscreen devices, it just looks like it's taking forever to load.

If I have to choose between the hover and tap animations on touchscreens, I'd rather have the tap (click) animation run for the reason stated above and also because there's really no such thing as hovering on a touchscreen device.

I don't have a way to test this on non ios devices; I'm assuming the problem is the same. So, how can I get tapping a touchscreen to behave like clicking a cursor and not like hovering a cursor on touchscreens?

Ean
  • 49
  • 7
  • Detect [touch-screen](https://stackoverflow.com/a/4819886/1169519) and don't add hover event if it's not needed. This might fail on devices having both, a mouse and a touch-screen. – Teemu Mar 16 '21 at 15:32
  • Thanks for your suggestion. In this particular case, as it is obviously a list of links, I was able to avoid a hover event altogether on all devices and use a jquery script to activate the animation on click/tap. – Ean Mar 26 '21 at 11:40

0 Answers0