javascript - 难以点击触摸屏上的链接

Question

这是我的设置（对不起，不好的 indetation）：

<div class="container">
   <a href="somewhere">
    <div class="tall"></div>
   </a>
  <a href="somewhere else">
    <div class="small"></div>
  </a>
</div>

我在“容器”上也有一些基本的悬停样式。我的问题是在移动设备上（我目前在 iOS 上测试）围绕“高”和“小”的两个链接很难点击。它们会触发“容器”上的悬停样式，但您必须将手指放在它们上一秒钟（甚至更长时间）才能真正打开链接。有什么想法可以解决这个问题吗？

Answer 1

不幸的是，链接上的 :hover 选择器在触摸屏设备上会执行此操作 - 即它将显示悬停效果一两秒钟，然后单击链接。处理此问题的最佳方法是仅检测设备类型并完全删除 :hover 样式。无论如何，您都不需要它来制作触摸屏。

阅读： http: //www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/