禁用移动浏览器上的悬停效果
我正在编写一个既可以在台式机上使用也可以在平板电脑上使用的网站。当从桌面访问时，我希望屏幕上的可点击区域能够带有 :hover效果(不同的背景颜色等)。对于平板电脑，没有鼠标，所以我不想要任何悬停效果。
问题是，当我在平板电脑上点击什么东西时，浏览器显然有某种“隐形鼠标光标”，它会移动到我点击的位置，然后把它留在那里——所以我刚刚点击的东西会以悬停效果点亮，直到我点击其他东西。
如何在使用鼠标时获得悬停效果，而在使用触摸屏时抑制悬停效果？
如果有人想提出建议，我不想使用用户代理嗅探。同样的设备可以同时拥有触摸屏和鼠标(也许现在不那么普遍，但将来会更加普遍)。我对这个设备不感兴趣，我感兴趣的是它目前的使用情况: 鼠标还是触摸屏。
I already tried hooking the touchstart, touchmove, and touchend events and calling preventDefault() 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 preventDefault 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.
编辑: 这可以用沼泽标准的 CSS :hover复制，但这里有一个快速复制的参考。
<style>
.box { border: 1px solid black; width: 150px; height: 150px; }
.box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>
如果你鼠标在任何一个框，它将得到一个蓝色的背景，这是我想要的。但是如果你点击任何一个框，它也会得到一个蓝色的背景，这是我试图防止的事情。
我还发布了一个实现上述功能的样例 给你，它还可以挂钩 jQuery 的鼠标事件。您可以使用它来查看点击事件也将触发 mouseenter，mousemove和 mouseleave。
