StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSafari iphone/ipad "mouse hover" on new link after prior one is replaced with javascript
text
Body
copied!<p>After you click a link on the iphone or ipad, it leaves a simulated mouse hover that triggers the <code>a:hover</code> 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.</p> <p>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. <em>I want to prevent that from happening to the new answer link</em>.</p> <p>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?</p> <p>Notes:</p> <ul> <li>I know I could just have <code>a:hover</code> use the same css styling as <code>a</code>, but <code>a:active</code> styling 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</li> <li>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)</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload