手机上的剩余悬停效果

Posted 2023-03-06

【中文标题】手机上的剩余悬停效果

【英文标题】：Leftover hover effect on mobile

【发布时间】：2016-02-16 23:14:23

【问题描述】：

我整天都在努力让这个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

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

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

---

EDIT_1：

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

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

【问题讨论】：

参考这个问题 - ***.com/questions/17233804/…

有趣的方法@sri。但是，在完全按照答案所说的去做之后，我得到了：Uncaught TypeError: Cannot read property 'removeChild' of undefined

如果你说任何点击都会重置悬停状态，我怀疑这是由新的touchstart 触发的。那么为什么不试试function fix() $(window).trigger('touchstart')。或相关事件/其他元素...

@Shikkediel 这就是我所希望的。触发随机点击/触摸某处，使其消失。但是，我没有这样做，请查看我的编辑！

尽管我很想解决它，但在这一点上，我可能不得不将它留在一个部分示例中。您可以看到样式中的悬停在.nav-fillpath a 上是如何更改为.activated 类的。然后在鼠标和触摸事件上使用 jQuery 添加和删除这些。我陷入了.next 类在 CSS 中也受到影响的地步。也许我错过了显而易见的事情，但我没有看到.nav-fillpath a.next 类不等于.next。无法做到这一点。我的意思是规则正好在.activated 之间。 jsfiddle.net/x3f084vz

【参考方案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/

【讨论】：

我猜一个带有:active 属性的小提琴示例会有所帮助。

我也有关于如何禁用 CSS 的问题，所以我更新的小提琴肯定会有所帮助！

看看这个：jsfiddle.net/x3spsbyp/7 在我的 android 设备上完美运行 - 很抱歉我没有使用你的小提琴，但希望它会有所帮助！

你的例子很棒。但是，我仍然有禁用 CSS 的问题，没有让整个箭头消失，所以我还不能测试你的方法。现在，当我点击箭头时，它会在底部变大。