:hover on ios 移动设备变为双击而不是悬停

Question

首先，这不是以下的克隆：iPad/iPhone hover problem causes the user to double click a link 因为我想要一个纯粹 CSS 的答案。此 link 中的所有答案都需要 js 或 jQuery，其中一个 CSS 答案涉及背景图片。我正在尝试更改不透明度，仅此而已。

CSS 想要让自己适应移动革命，但我看到的每个解决方案都需要 javascript 或 jQuery。

下面是一些简单的代码来说明我的意思：

.btn {
  border-radius: 5px;
  display: block;
  opacity: 1; <--from
  background: red;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  &:hover {
    opacity:.7; <--to
    transition: opacity .2s ease-out; <--fun fade animation :)
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
  }
}

已在 Chrome 和 Safari 中测试

Answer 1

iOS 不会在第一次点击时触发 link 单击事件，如果 :hover 状态为：

有一个CSStransition动画
显示子内容（例如子菜单、工具提示或 ::before/::after 元素）

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

如果您删除动画或子元素，您应该让它在单击时触发。

来自 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 还简单地建议根本不要使用悬停：

It’s probably best to just not rely on hover to reveal anything. The tech to work around it isn’t quite there yet.

来自Trend Walton's article：

Ultimately, I think seeing hover states fade away will make the web a better place. There never has been any substitute for concise content, clear interaction, and simple design. If we focus on core elements that make browsing the web great, our sites will function properly no matter how people use them.

:hover on ios 移动设备变为双击而不是悬停

:hover on ios mobile devices turns into double-touch instead of hover

css

hover

touch

ios

TL;DR：不要依靠悬停来揭示事物