javascript - How to prevent sticky hover effects for buttons on touch devices -

I have created a carousel with the previous and next buttons that always appear. These buttons are a hover state, they change blue color. The hover state is sticky on touch devices like the iPad, so it remains blue after taping the button. I do not want to be.

• I can add a no-hover class ontouchend for each button, and my CSS like this: Button: No (.no-hover): hover {background color: blue; } But this is probably quite bad for performance, and does not handle devices like Chromebook Pixel (which is both touchscreen and mouse).

• I can add the touch class to document element and create my CSS like this: Html: not (.touch) button: hover {background color: blue; } But it also does not work right on devices with both touch and mouse.

  What I like is removing the hover state ontouchend . But it does not seem that it is possible. Keeping the second element in mind, the hover does not remove the state, taping the other element manually taps, but I think JavaScript can not trigger a trigger.

  Are all the solutions that I see incomplete a right solution?

  You can temporarily remove the hover state by removing the link from the DOM. View in CSS:

   : hover {background: red;}   
   In JS you have:  
    function ok () {Var el = this; Var par = el.parentNode; Var next = el.next ciboling; Par.removeChild (L); SetTimeout (function () {par.insertBefore (el, next);}, 0)}   
   and then in your HTML:  
    & lt ; A href = "#" ontouch = "this.onclick = fix" & gt; Test & lt; / A & gt;