移动设备上的残留悬停效果

Question

我一整天都在尝试使这个JSFiddle对手机也能起作用，但是我的所有尝试都没有效果。在桌面上，当用户将鼠标悬停在箭头上时，它会变成红色。在移动设备上，当用户轻触箭头（以便单击它）时，悬停效果会被激活并永久保留，直到网站的其他位置发生（随机的）点击。如何摆脱这个噩梦？

HTML:

<nav class="nav-fillpath">
  <a class="next" onClick="load('prev')">
    <span class="icon-wrap"></span>
    <h3><strong>Alexis</strong> Tsipras</h3>
  </a>      
</nav>

CSS：

.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
    -webkit-transform: translateX(-50%) rotate(55deg);
    transform: translateX(-50%) rotate(55deg);
    background-color: red;
}

---

一些相关的好问题：

1. 如何在触摸设备上模拟悬停效果？
2. jQueryMobile中触摸后悬停效果仍然存在
3. 如何使用jQuery触发链接的单击事件？

---

编辑_0:

在查看了这篇文章如何防止触摸设备上按钮的粘性悬停效果之后，如果我使用这个：

ontouchend="this.onclick=fix

我的链接现在没有任何反应。如果我使用=fix()，我会得到一个错误：

未捕获的类型错误：无法读取未定义属性'removeChild'

---

EDIT_1：

我尝试了Shikkediel建议的方法，在这个fiddle中，但是我没有成功。这里是新的HTML：

<a class="next" onClick="load('prev')" ontouchend="fix()">

- gsamaras

---

有趣的方法 @sri。但是，我按照答案所说的做了，却得到了以下错误：Uncaught TypeError: Cannot read property 'removeChild' of undefined。 - gsamaras

如果您说任何点击都会重置悬停状态，我怀疑这是由新的 touchstart 触发的。那么为什么不尝试 function fix() {$(window).trigger('touchstart')}。或者相关事件/其他元素... - Shikkediel

@Shikkediel 我也尝试了 click 和 touchend，但是都没有用！ :/ - gsamaras

好吧，有点遗憾，但我想这是值得一试的直觉。不过我看你已经解决了。我的下一个建议是使用jQuery的addClass和removeClass，并监听所有事件。这样，您就不必弄清访问者使用的设备，而脚本将准备好两者。随着屏幕尺寸变得越来越大，一些机器具有处理两者的能力，试图区分触摸和鼠标变得越来越困难。但很好，你已经找到了一个可行的解决方案。 - Shikkediel

尽管我很想解决它，但现在我可能只能将其留作部分示例。您可以看到在样式中悬停在.nav-fillpath a上已更改为.activated类。然后，这些类会在鼠标和触摸事件上使用jQuery添加和删除。我卡在了.next类也受到CSS影响的地方。也许我错过了显而易见的东西，但我无法看到.nav-fillpath a.next类不仅仅等于.next。无法正确处理。我的意思是规则就在.activated之间。http://jsfiddle.net/x3f084vz/ - Shikkediel

Answer 1

在移动设备上，这是自然的行为，因此在这种情况下我会完全禁用CSS hover：

选定移动设备并应用以下操作：

.MOBILE .nav-fillpath a.next:hover::after,
.MOBILE .nav-fillpath a.next:hover .icon-wrap::after {
    -webkit-transform: initial;
    transform: initial;
    background-color: inherit;
}

如果您仍希望在移动设备上拥有悬停效果的替代方案，您可以试用:active属性。

以下是示例：

http://jsfiddle.net/x3spsbyp/7/

- Adam Lesniak

---

一个带有 :active 属性的小例子可能会有所帮助。 - gsamaras

我也遇到了如何禁用CSS的问题，因此我的更新后的fiddle肯定会很有帮助！ - gsamaras

看看这个：http://jsfiddle.net/x3spsbyp/7/ 在我的安卓设备上完美运行 - 很抱歉我没用你的代码片段，但希望能对你有所帮助！ - Adam Lesniak

你的例子很棒。然而，我仍然有一个问题，如何禁用CSS而不使整个箭头消失，所以我无法测试你的方法。现在，当我点击箭头时，它会移到底部并变得巨大。 - gsamaras

Answer 2

您可以尝试这个：

@media(hover: hover) {
   .nav-fillpath a.next:hover::after,
      .nav-fillpath a.next:hover .icon-wrap::after {
         -webkit-transform: translateX(-50%) rotate(55deg);
         transform: translateX(-50%) rotate(55deg);
         background-color: red;
      }
   }
}

因此，您的悬停效果只能在支持悬停的设备上起作用。

- Vikker