移动设备上的剩余悬停效果

我一整天都在努力做这个JSFiddle http://jsfiddle.net/gsamaras/q2w4jjyt/4/也适用于手机，但我所有的尝试都没有效果。在桌面上，当用户将鼠标悬停在箭头上时，它会变成红色。在移动设备上，当用户触摸（为了单击它）箭头时，悬停效果将被激活并永远停留在那里，直到在网站上的任何位置发生另一次（随机）单击。如何摆脱这个噩梦呢？

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. 如何在触摸设备上模拟悬停效果？ https://stackoverflow.com/questions/8970280/how-to-simulate-hover-effect-on-touch-devices
2. jQuery Mobile 中触摸后悬停效果保持不变 https://stackoverflow.com/questions/16814280/hover-effect-stays-after-touch-in-jquerymobile
3. 如何使用 jQuery 触发链接点击 https://stackoverflow.com/questions/5811122/how-to-trigger-a-click-on-a-link-using-jquery

EDIT_0:

检查完这个后如何防止触摸设备上按钮的粘滞悬停效果 https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices，如果我使用这个：

ontouchend="this.onclick=fix

我的链接现在没有任何作用。如果我使用=fix()，我收到错误：

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

EDIT_1:

我尝试了Shikkediel的建议，在这个fiddle http://jsfiddle.net/gsamaras/q2w4jjyt/9/然而，我却没有运气。这里是新的 HTML：

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

这是移动设备上的自然行为，在这种情况下我会完全禁用 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财产。

请在下面找到它的示例：

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