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

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:

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

回答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-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/

来源：https://stackoverflow.com/questions/33725501/leftover-hover-effect-on-mobile

标签

javascript