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:

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

Refer this Question - http://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices — Sree, Nov 15 '15 at 21:50
Interesting approach @sri. However, after doing exactly what the answer says, I am getting: `Uncaught TypeError: Cannot read property 'removeChild' of undefined` — gsamaras, Nov 15 '15 at 21:55
If you say that any click will reset the hover state, I suspect that's triggered by a new `touchstart`. So why not try `function fix() {$(window).trigger('touchstart')}`. Or a related event / other element... — Shikkediel, Nov 16 '15 at 02:36
@Shikkediel that's what I was hoping for. To trigger a random click/touch somewhere, so that it will go ago. However, I fail to do so, see my edit please! — gsamaras, Nov 16 '15 at 13:26
@Shikkediel I also tried `click` and `touchend`, but nothing! :/ — gsamaras, Nov 16 '15 at 15:24
Okay, too bad but I guess it was a hunch worth trying. I see you worked it out though. My next suggestion would have been to use `addClass` and `removeClass` and listen to all events using jQuery. That way you wouldn't have to figure out what device the visitor uses but the script would be ready for both. Trying to make a distinction between touch and mouse is increasingly difficult with screen sizes getting larger and some machines having the capability to handle both. But good you found a working solution already. — Shikkediel, Nov 16 '15 at 20:02
@Shikkediel I am still highly interested though. I asked a new question here: http://stackoverflow.com/questions/33744979/click-link-when-arrow-is-clicked — gsamaras, Nov 16 '15 at 21:29
As much as I'd like to solve it, at this point I may have to leave it at a partial example. You can see how hovering on `.nav-fillpath a` in the style has been changed into the `.activated` class. These are then added and removed with jQuery on both mouse and touch events. I am getting stuck at the point where the `.next` class is also affected in the CSS. Maybe I'm missing the obvious but I'm failing to see how the `.nav-fillpath a.next` class isn't equal to merely `.next`. Can't get that right. The rules I mean stick right out in between the `.activated`. **http://jsfiddle.net/x3f084vz/** — Shikkediel, Nov 17 '15 at 01:22

Adam Lesniak · Accepted Answer · 2015-11-16T15:32:27.840

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/

edited Nov 16 '15 at 15:32

answered Nov 16 '15 at 14:04

Adam Lesniak

878
10
32

A fiddle example with the `:active` property would help I guess. – gsamaras Nov 16 '15 at 15:00
I am also having issues on how to disable CSS, so an updated fiddle of mine would sure be helpful! – gsamaras Nov 16 '15 at 15:23
Check this one out: http://jsfiddle.net/x3spsbyp/7/ works perfectly on my Android device - sorry that I didn't use your fiddle but hope it'll help! – Adam Lesniak Nov 16 '15 at 15:31
Your example is great. However, I still have issues on disabling the CSS, without making the whole arrow disappear, so I can't test yet your approach. Now, when I click on the arrow, it goes at the bottom and gets huge. – gsamaras Nov 16 '15 at 15:56

score 1 · Answer 2 · answered Feb 16 '23 at 05:17

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.

Leftover hover effect on mobile

2 Answers2

Linked