Leftover Hover Effect On Mobile

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, wh

Solution 1:

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-fillpatha.next:hover::after,
.MOBILE.nav-fillpatha.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/