title: Disable hover effects on mobile browsers
body: <p>I'm writing a Web site that's meant to be used from both desktops and tablets. When it's being visited from a desktop, I want the clickable areas of the screen to light up with <code>:hover</code> effects (different background color, etc.) With a tablet, there's no mouse, so I don't want any hover effects.</p>
  
  <p>The problem is, when I tap something on the tablet, the browser evidently has some kind of "invisible mouse cursor" that it moves to the location I tapped, and then leaves it there -- so the thing I just tapped lights up with a hover effect until I tap something else.</p>
  
  <p><strong>How can I get the hover effects when I'm using the mouse, but suppress them when I'm using the touchscreen?</strong></p>
  
  <p>In case someone was thinking of suggesting it, I don't want to use user-agent sniffing. The same device could have both a touchscreen and a mouse (maybe not so common today, but much more so in the future). I'm not interested in the device, I'm interested in how it's currently being used: mouse or touchscreen.</p>
  
  <p>I already tried hooking the <code>touchstart</code>, <code>touchmove</code>, and <code>touchend</code> events and calling <code>preventDefault()</code> on all of them, which does suppress the "invisible mouse cursor" some of the time; but if I tap rapidly back and forth between two different elements, after a few taps it will start moving the "mouse cursor" and lighting up the hover effects anyway -- it's like my <code>preventDefault</code> isn't always honored. I won't bore you with the details unless necessary -- I'm not even sure that's the right approach to take; if anyone has a simpler fix, I'm all ears.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> This can be reproduced with bog-standard CSS <code>:hover</code>, but here's a quick repro for reference.</p>
  
  <pre><code>&lt;style&gt;
    .box { border: 1px solid black; width: 150px; height: 150px; }
    .box:hover { background: blue; }
  &lt;/style&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If you mouse over either of the boxes, it will get a blue background, which I want. But if you tap on either of the boxes, it will also get a blue background, which is the thing I'm trying to prevent.</p>
  
  <p>I've also posted a sample <a href="http://sandbox.excastle.com/stackoverflow/8291517.html" rel="noreferrer">here</a> that does the above and also hooks jQuery's mouse events. You can use it to see that tap events will also fire <code>mouseenter</code>, <code>mousemove</code> and <code>mouseleave</code>.</p>