mobile safari links retains focus after touch

Question

My navigation is quite simple. I have a hover state which adds a border and a transparent gradient png background to some text, and an additional class which, when added by

Answer 1

I ran across this issue as well. My problem was on the iPad, if I tapped an anchor and scrolled slightly, a click event did not fire but the element would retain the hover state CSS. My belief is that the iPad was actually retaining a focus state and applying the :hover CSS styles in an effort to simulate the desktop experience.

A non-JS and practical workaround is to not deliver hover styles to touch devices if there is not a need for them. Touch devices do not have a "real" hover state, however it appears hover is simulated when an element is focused or tapped-and-scrolled upon.

So with Modernizr.js loaded, I moved my hover styles into the scope of .no-touch -

i.e.

/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
  /* hover styles */
}

Then, when the element is clicked I am toggling an active class on it.

.my-element.active {
  /* active styles */
}

The only negative takeaway is you do not get a "being tapped state". I have yet to investigate a solution for that as it's not really important for my apps.

Answer 2

This is an old post but I was struggling with this today in 2019, and I find this clean solution and I want to share with all of you.

<a href="#">Try hovering over me!</a>

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

Basically what are we doing here is using hover in any device with pointer mechanism. Nowadays there is softwares with html readers for a better accessibility of the site and should not be a good idea, deactivate :hover for all mobile devices. Just to be clear, any device without pointing mechanism the hover will not take effect, otherwise we applied the :hover style.