Question

首先，这不是克隆：iPad/iPhone hover problem causes the user to double click a link 因为我想要一个纯粹的CSS答案。此链接中的所有答案都需要js或jQuery，而一个CSS答案涉及背景图像。我试图改变不透明度，就是这样。

CSS希望将自己转向移动革命，但我看到的每个解决方案都是为了创建悬停效果的简单“touchDown”（又称触摸悬停），需要使用javascript或jQuery。

这里有一些简单的代码来说明我的意思：

JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// ...
frame.setVisible(true);
// ...
Container area = frame.getContentPane();
Graphics pen = area.getGraphics();
pen.clearRect(0, 0, area.getWidth(), area.getHeight()); // Remove previous drawing
pen.drawString("Text", 50, 50);
// ...
area.repaint();

在Chrome＆amp; Safari浏览器

Answer 1

如果:hover状态为：

，iOS将不会在第一次点击时触发链接点击事件

拥有CSS transition动画
显示子内容（例如子菜单，工具提示或::before / ::after元素）

在这两种情况下，第一次点击将触发:hover状态，第二次点击将触发链接（或点击事件）。

如果删除动画或子元素，则应在一次点击中触发它。

CSS Tricks的这篇精彩文章深入探讨了这个问题：
The Annoying Mobile Double-Tap Link Issue

Answer 2

在触摸屏设备上使用 touchstart 事件而不是 click。此示例解决了 iPhone 和 iPad 的问题。

if (
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPod/i)
) {
  // iPhone double-click polyfill
  $(document).on("touchstart", ".btn-that-does-something", function (e) {
    e.preventDefault();
    doSomething(this);
  });
  $(document).on("click", ".btn-that-does-something", function (e) {
    // no-op
    e.preventDefault();
  });
} else {
  $(document).on("click", ".btn-that-does-something", function (e) {
    e.preventDefault();
    doSomething(this);
  });
}

Answer 3

TL;DR：不要依赖悬停来显示事物

来自 source recommended in @ihodonald's answer 也只是建议根本不要使用悬停：

<块引用>

最好不要依赖悬停来显示任何内容。解决此问题的技术尚不完善。

来自Trend Walton's article：

<块引用>

最终，我认为看到悬停状态逐渐消失将使网络变得更好。简洁的内容、清晰的交互和简单的设计从来没有任何替代品。如果我们专注于使网页浏览变得更棒的核心元素，那么无论人们如何使用我们的网站，它们都将正常运行。

：悬停在ios移动设备上变为双触而不是悬停

3 个答案:

TL;DR：不要依赖悬停来显示事物