Question

单击iphone或ipad上的链接后，会留下模拟鼠标悬停，触发该链接上的a:hover css样式。如果链接具有使您保持在同一页面的javascript处理程序，则在您单击其他链接之前，悬停状态不会更改。

如果你有一个ajax小部件询问问题并且每个答案都是链接，那就太奇怪了。当您触摸其中一个答案时，它会突出显示悬停状态，然后当问题和答案被新问题和答案替换（使用javascript）时，出现在与前一个答案相同位置的新答案有其悬停状态自动触发。 我想阻止这种情况发生在新的答案链接。

有什么方法（也许是javascript中的某些东西）可以给我与“悬停”不再高于此元素相同的结果吗？

注意：

我知道我可以让a:hover使用与a相同的CSS样式，但a:active样式几乎不会引人注意，因为触摸点击的活动状态非常简短，所以我我希望能够在链接上显示悬停状态，直到我用新的html
我在javascript中尝试了各种方法，比如在dom元素和其他一些东西上调用“blur（）”，但没有运气 - 我开始认为最好的解决方案是将类应用于链接在javascript事件上自己管理悬停状态（或者只是保持原样）

Answer 1

问题在于，当您替换现有内容时，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);
  });
});

当真实地执行此操作时，将在与AJAX函数同时调用fadeOut，然后在AJAX回调中执行删除/添加。

Answer 2

您可以尝试编写另一个：当父级具有特定类时激活的悬停规则，实际上取消了现有的悬停规则。父级上的类需要在touchend上添加并在touchstart上删除，以便默认规则可以在单击或触摸的下一个链接上生效。

我刚刚解决了一个类似的问题，我希望将鼠标悬停在列表项的样式上，但由于父级可以使用iscroll用一根手指滚动，因此我需要在滚动列表移动后立即取消该悬停效果。它使用jQuery，但你明白了：

$('ul.scroll').bind('touchmove', function(e) {
    $(this).addClass('moving');
});
$('ul.scroll').bind('touchstart', function(e) {
    $(this).removeClass('moving');
});

这是我的风格规则：

ul.scroll li:hover {
    background-color: #D1E8DA;
}
ul.scroll.moving li:hover {
    background-color: #EFEFEF;
}

之前使用javascript替换之前的iphone / ipad“鼠标悬停”在新链接上

2 个答案: