手机上的剩余悬停效果

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. How to simulate hover effect on touch devices?
2. Hover effect stays after touch in jQueryMobile
3. How to trigger a click on a link using jQuery

---

EDIT_0：

检查此How to prevent sticky hover effects for buttons on touch devices后，如果我使用此：

ontouchend="this.onclick=fix

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

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

---

EDIT_1：

我在fiddle 中尝试了 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 属性。

请在下面找到它的示例：

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