剩余的悬停对移动设备的影响 [英] Leftover hover effect on mobile

问题描述

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

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:

1. 如何在触摸设备上模拟悬停效果？


2. 悬停效果在jQueryMobile触摸后保持不变


3. 如何使用jQuery触发链接点击

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：

检查后如何防止触摸设备上按钮的粘滞悬停效果，如果我使用它：

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:

Uncaught TypeError：无法读取未定义属性'removeChild'

Uncaught TypeError: Cannot read property 'removeChild' of undefined

---

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:

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

这篇关于剩余的悬停对移动设备的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！