手机上的剩余悬停效果

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;
}

一些很好的相关问题：

How to simulate hover effect on touch devices?
Hover effect stays after touch in jQueryMobile
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

我的 link 现在什么都不做。如果我使用 =fix()，我会得到一个错误：

Uncaught TypeError: Cannot read property 'removeChild' of undefined

EDIT_1:

我在 fiddle 中尝试了 Shikkediel 的建议，但是，我没有运气。这里是新的 HTML:

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

Answer 1

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

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

.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/

手机上的剩余悬停效果

Leftover hover effect on mobile

html

javascript

css

jquery

hover