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

本文介绍了剩余的悬停对移动设备的影响的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在努力让这个也适用于手机，但所有我的尝试没有效果。在桌面上，当用户将鼠标悬停在箭头上时，它将变为红色。在移动设备上，当用户触摸（为了点击它）箭头时，悬停效果会被激活并永远粘在那里，直到在网站的任何地方发生另一个（随机）点击。如何摆脱这场噩梦？

I am trying all day to make this JSFiddle work for mobiles too, but all my attempts had no effect. On a desktop, when a user hovers over the arrow, it will get red. On a mobile, when the user touches (in order to click it) the arrow, the hover effect gets activated and sticks there forever, until another (random) click happens, anywhere on the site. How to get out of this nightmare?

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

一些相关的好问题：

Some good related questions:

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：

检查后，如果我使用它：

After checking this How to prevent sticky hover effects for buttons on touch devices, if I use this:

ontouchend="this.onclick=fix

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

my link now doesn't do anything. If I use =fix(), I am getting an error:

EDIT_1 ：

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

I tried what Shikkediel suggested, in this fiddle, however, I had no luck. Here the new HTML:

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

推荐答案

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

It's natural behaviour on mobile devices, I would disable CSS hover totally in this case:

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

Target the mobile devices with some class or media query and apply following:

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

如果你还想在移动设备上有替代的悬停效果，你可以玩：有效属性。

If you still'd like to have alternative of hover effect on mobile you can play with :active property.

请在下面找到它的示例：

Please find example of it below: