Safari iphone/ipad“；鼠标悬停“；上一个链接被javascript替换后的新链接上

单击iphone或ipad上的链接后，它会留下一个模拟鼠标悬停，触发该链接上的

a:hover

css样式。如果该链接有一个javascript处理程序使您保持在同一页面上，则在您单击另一个链接之前，悬停状态不会改变

如果您有一个ajax小部件，它会提出问题，而每个答案都是链接，那么这会变得很奇怪。当您触摸其中一个答案时，它会以悬停状态高亮显示，然后当问题和答案被新的问题和答案替换（使用javascript）时，出现在与先前答案相同位置的新答案会自动触发其悬停状态。我想防止这种情况发生在新的答案链接上

是否有任何方法（可能是javascript中的某些东西）可以让我得到与“hover”不再位于该元素上方相同的结果

注:

• 我知道我可以让

  a:hover

  使用与

  a

  相同的css样式，但是

  a:active

  样式很难被注意到，因为触摸点击的活动状态很短，所以我希望能在链接上显示悬停状态，直到我用新的html替换它
• 我在javascript中尝试了多种方法，比如在dom元素上调用“blur（）”和其他一些东西，但是运气不好——我开始认为最好的解决方案是将类应用到javascript事件的链接上，以自己管理悬停状态（或者保持原样）

---

您可以尝试编写另一个：悬停规则，该规则在父类具有特定类时激活，实际上否定了现有的悬停规则。父级上的类需要在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;
}

---

问题是，在替换内容时，Mobile Safari会将新元素视为旧元素，因为它们在DOM中占据相同的位置。一种解决方法是先删除旧元素，然后异步添加新元素。最简单的方法是使用

setTimeout（）

//当我们点击答案时
$（'body'）。在（'click'，'answer'，function（）上{
//不要跟随它的链接
event.preventDefault（）；
//淡出容器
$（'.container'）.fadeOut（函数（）{
//删除旧元素（在淡出后发生，因为我们在回调中）
$（'.container'）.html（''）；
//异步添加新元素并使容器淡入。
setTimeout（“$（\'.container\”）.html（\'\'）；$（\'.container\）.fadeIn（）；”，0）；
});
});

在实际执行此操作时，将在调用AJAX函数的同时调用淡出，然后在AJAX回调中进行删除/添加

// 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);
  });
});