Javascript 移动设备上的剩余悬停效应

我一整天都在努力让手机也能用，但我所有的努力都没有效果。在桌面上，当用户将鼠标悬停在箭头上方时，箭头将变为红色。在手机上，当用户触摸（为了点击）箭头时，悬停效果会被激活并永远停留在那里，直到再次（随机）点击发生在网站的任何位置。如何摆脱这场噩梦

HTML:

---

一些好的相关问题：

---

编辑0:

检查此项后，如果我使用此项：

ontouchend="this.onclick=fix

我的链接现在没有任何作用。如果我使用

=fix（）

，我会得到一个错误：

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

---

编辑_1：

我尝试了希克迪尔的建议，但在这方面，我没有运气。以下是新的HTML：

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

---

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

属性

请参见下面的示例：

---

参考这个问题-有趣的方法@sri。然而，在完全按照答案所说的做了之后，我得到了：

uncaughttypeerror:cannotread属性'removeChild'的undefined

如果您说任何单击都将重置悬停状态，我怀疑这是由新的

touchstart

触发的。那么为什么不试试

函数fix（）{$（window）.trigger（'touchstart'）}

。或者相关事件/其他元素…@Shikkediel这正是我所希望的。触发某个地方的随机点击/触摸，以便它能在几分钟前启动。但是，我没有这样做，请看我的编辑！虽然我很想解决这个问题，但在这一点上，我可能不得不把它放在一个局部的例子中。您可以看到，在样式中悬停在

.nav fillpath a

上是如何变为

.activated

类的。然后使用jQuery在鼠标和触摸事件上添加和删除这些内容。我被困在

.next

类在CSS中也受到影响的地方。也许我忽略了明显的问题，但是我没有看到

.nav fillpath a.next

类如何不仅仅等同于

.next

。我做不好。我所说的规则就在

.activated

之间。我想，一个带有

：active

属性的fiddle示例会有所帮助。我在如何禁用CSS方面也遇到了一些问题，因此我更新的fiddle肯定会有所帮助！看看这个：在我的Android设备上工作得很好-很抱歉我没有用你的小提琴，但希望它能帮上忙！你的例子很好。但是，在禁用CSS时，我仍然存在一些问题，无法使整个箭头消失，因此我还无法测试您的方法。现在，当我点击箭头时，它会在底部变大。

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

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