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

Posted 2023-05-08

【中文标题】Safari iphone/ipad 在新链接上的“鼠标悬停”在前一个被替换为 javascript 后

【英文标题】：Safari iphone/ipad "mouse hover" on new link after prior one is replaced with javascript

【发布时间】：2011-03-08 10:09:03

【问题描述】：

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

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

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

注意事项：

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

【参考方案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);
  );
);

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

【参考方案2】：

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