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

Question

这是我的设置(抱歉错误的指示):

<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/