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 jQuery, adds color behind that transparent image.

If you click to toggle the class in a web browser you'll see the color come in and out, but the background image stays if you never move the mouse away from the button. This is expected behavior.

My problem is that when using an iPad, the touch seems to retain the hover state and the :hover properties never go away unless you click another button, in which case the persistent :hover properties are added to that button until another is pressed.

I can't imagine that I am the first with this problem, but searches haven't turned anything up.

Help?

Normal - Hover - Active (via addClass() )

Answer 1

If you're using Modernizr, the no-touch class will be added to the root html element for non-touch devices. Then you can do this:

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}