禁用移动浏览器上的悬停效果

我正在开发一个网站，旨在供台式机和平板电脑使用。当从台式机访问时，我希望屏幕上的可点击区域会呈现出:hover效果（不同的背景颜色等）。但是对于平板电脑，则没有鼠标，所以我不想有任何:hover效果。
问题在于，当我在平板电脑上轻触某个东西时，浏览器显然有某种“隐形鼠标光标”，它将光标移动到我轻触的位置，然后把它留在那里——所以我刚才轻触的那个东西会一直呈现:hover效果，直到我轻触其他东西。
如何在使用鼠标时获得:hover效果，但在使用触摸屏时抑制它们？
如果有人在想建议，我不想使用用户代理嗅探。同一设备可能同时拥有触摸屏和鼠标（也许在今天不太常见，但在未来就不是这样了）。我不关心设备，我关心的是它当前的使用方式：鼠标还是触摸屏。
我已经尝试钩取touchstart、touchmove和touchend事件，并在所有这些事件上调用preventDefault()，有时可以阻止“隐形鼠标光标”，但如果我在两个不同的元素之间快速切换轻触几次，它会开始移动“鼠标光标”，并仍然呈现:hover效果——就像我的preventDefault并不总是被接受。除非必要，否则我不会为细节烦扰您——我甚至不确定这是否是正确的方法；如果有更简单的解决方案，我听取意见。
编辑：可以使用标准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。