手机上的剩余悬停效果

我正在尽量让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; 
}

一些很好的相关问题：

EDIT_0：

ontouchend="this.onclick=fix

我的链接现在没有做任何事情：

选中此How to prevent sticky hover effects for buttons on touch devices，如果我用这个之后。如果我使用=fix()，我得到一个错误：

Uncaught TypeError: Cannot read property 'removeChild' of undefined

EDIT_1：

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

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

来源

2015-11-15 gsamaras

转问这个问题 - http://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons -on-touch-devices – Sree

有趣的方法@sri。但是，在做了正确的答案后，我得到了：'Uncaught TypeError：无法读取'undefined'属性'removeChild' – gsamaras

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

这是很自然的行为在移动设备上，我将禁用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/

来源

2015-11-16 14:04:23

“：active”属性的一个小例子会帮助我猜。 – gsamaras

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

检查这一个：http://jsfiddle.net/x3spsbyp/7/完美地在我的Android设备上工作 - 对不起，我没有使用你的小提琴，但希望它会帮助！ –

手机上的剩余悬停效果

回答

相关问题