Эффект остаточного наведения на мобильный

Question

Я пробовал весь день, чтобы сделать это 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; 
} 

---

Некоторые хорошие смежные вопросы:

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:

После проверки этого How to prevent sticky hover effects for buttons on touch devices, если я использую это:

ontouchend="this.onclick=fix 

моя ссылка в настоящее время ничего не делает. Если я использую =fix(), я получаю сообщение об ошибке:

Uncaught TypeError: Cannot read property 'removeChild' of undefined

---

EDIT_1:

Я попробовал то, что предложил Shikkediel в этом fiddle, однако, у меня не было никакой удачи. Вот новый HTML:

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

Answer 1

Это естественное поведение на мобильных устройствах, я бы отключить CSS зависать полностью в этом случае:

Target мобильные устройства с некоторым классом или медиа-запроса и применить следующие:

.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/