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

Question

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

CSS 希望让自己适应移动革命，但我看到的每个创建悬停效果的简单“touchDown”(又名触摸悬停)解决方案都需要 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 不会在第一次点击时触发链接点击事件，如果 :hover 状态为:

• 有 CSS transition 动画
• 显示子内容(例如子菜单、工具提示或 ::before/::after 元素)

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

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

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