After you click a link on the iphone or ipad, it leaves a simulated mouse hover that triggers the a:hover css styling on that link. If the link has a javascript handler that keeps you on same page, the hover state will not change until you click on another link.
This gets weird if you have an ajax widget that asks questions and each answer is link. When you touch one of the answers, it highlights with the hover state, and then when the question and answers are replaced (using javascript) by a new question and answers, the new answer that appears in the same position as the prior answer has its hover state automatically triggered. I want to prevent that from happening to the new answer link.
Is there any way (maybe some something in javascript) that can give me the same result as the "hover" no longer being above this element?
Notes:
- I know I could just have
a:hoveruse the same css styling asa, buta:activestyling is hardly noticeable since the active state of a touch click is so brief, so I'm hoping for something that can show the hover state on a link until I replace it with new html - I have tried a variety of approaches in javascript, like calling "blur()" on the dom element and some other stuff, but no luck—I'm starting to think that the best solution is to apply classes to the links on javascript events to manage the hover state myself (or just leave it as it is)