剩余的悬停对移动设备的影响

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触发链接上的单击

---

EDIT_0：

检查此如何防止触摸设备上按钮的粘滞悬停效果 ，如果我使用此：

ontouchend="this.onclick=fix

我的链接现在什么也没做。 如果我使用=fix() ，我收到一个错误：

未捕获的TypeError：无法读取未定义的属性“removeChild”

---

EDIT_1 ：

我尝试了Shikkediel的建议，然而，在这个小提琴中，我没有运气。 这里是新的HTML：

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

Answer 1

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

使用某些类或媒体查询定位移动设备并应用以下内容：

.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 property。

请在下面找到它的例子：

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