title: How to prevent sticky hover effects for buttons on touch devices
body: <p>I have created a carousel with a previous and a next button that are always visible. These buttons have a hover state, they turn blue. On touch devices, like iPad, the hover state is sticky, so the button stays blue after tapping it. I don't want that.</p>
  
  <ul>
  <li><p>I could add a <code>no-hover</code> class <code>ontouchend</code> for each button, and make
  my CSS like this: <code>button:not(.no-hover):hover { background-color:
  blue; }</code> but that's probably quite bad for performance, and doesn't
  handle devices like the Chromebook Pixel (which has both a
  touchscreen and a mouse) correctly.</p></li>
  <li><p>I could add a <code>touch</code> class to the <code>documentElement</code> and make my CSS
  like this: <code>html:not(.touch) button:hover { background-color: blue;
  }</code> But that also doesn't work right on devices with both touch and a
  mouse.</p></li>
  </ul>
  
  <p>What I would prefer is removing the hover state <code>ontouchend</code>. But it doesn't seem like that is possible. Focusing another element doesn't remove the hover state. Tapping another element manually does, but I can't seem to trigger that in JavaScript.</p>
  
  <p>All the solutions I have found seem imperfect. Is there a perfect solution?</p>