:hover 在 ios 移动设备上变成双触摸而不是悬停

Question

首先，这不是以下内容的克隆：iPad/iPhone 悬停问题导致用户双击链接， 因为我想要一个纯 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

如果:hover状态如下，iOS 将不会在第一次点击时触发链接点击事件：

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

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

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

这篇来自 CSS Tricks 的精彩文章深入探讨了这个问题：
烦人的移动双击链接问题