在您点击 iphone 或 ipad 上的链接后,它会留下模拟鼠标悬停,触发该链接上的 a:hover
css 样式。如果该链接具有使您保持在同一页面上的 javascript 处理程序,悬停状态将不会改变,直到您单击另一个链接。
如果您有一个提问的 ajax 小部件并且每个答案都是链接,这会变得很奇怪。当您触摸其中一个答案时,它会以悬停状态突出显示,然后当问题和答案被新的问题和答案替换(使用 javascript)时,出现在与先前答案相同位置的新答案具有其悬停状态自动触发。 我想防止这种情况发生在新的答案链接上。
有什么方法(也许是 javascript 中的某些东西)可以给我与“悬停”不再位于该元素上方相同的结果?
注意事项:
- 我知道我可以让
a:hover
使用与a
相同的 css 样式,但是a:active
样式很难被注意到,因为触摸点击的事件状态非常短暂,所以我希望有一些东西可以在链接上显示悬停状态,直到我用新的 html 替换它 - 我在 javascript 中尝试了多种方法,例如在 dom 元素上调用“blur()”和其他一些东西,但没有成功——我开始认为最好的解决方案是将类应用于链接在 javascript 事件上自行管理悬停状态(或保持原样)
最佳答案
问题是,当您就地替换内容时,Mobile Safari 会将新元素视为旧元素,因为它们在 DOM 中占据相同的位置。一种解决方法是先删除旧元素,然后异步添加新元素。最简单的方法是使用 setTimeout()
。
http://jsfiddle.net/chad/JNZvu/10/
// When we click on an answer
$('body').on('click', '.answer', function(){
// don't follow it's link
event.preventDefault();
// fade out the container
$('.container').fadeOut(function(){
// remove old elements (happens after fadeOut because we are in the callback)
$('.container').html('');
// add new elements asynchronously and fade container back in.
setTimeout( '$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0);
});
});
当真正这样做时,fadeOut 将与 AJAX 函数同时被调用,然后删除/添加将在 AJAX 回调中发生。
关于javascript - Safari iphone/ipad "mouse hover"在之前的链接被 javascript 替换后的新链接上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3120497/