Leftover hover effect on mobile

Question

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

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

Uncaught TypeError: Cannot read property 'removeChild' of undefined

---

EDIT_1:

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()">

Answer 1

You can try this:

@media(hover: hover) {
   .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;
      }
   }
}

So your hover effect will only works on device that support hover.

Answer 2

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/