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

:hover on ios mobile devices turns into double-touch instead of hover(:hover 在 ios 移动设备上变成双击而不是悬停)

问题描述

首先，这不是以下内容的克隆:iPad/iPhone 悬停问题导致用户双击链接因为我想要一个纯 CSS 的答案.此链接中的所有答案都需要 js 或 jQuery，而一个 CSS 答案涉及背景图像.我正在尝试改变不透明度，仅此而已.

First off, this is not a clone of: iPad/iPhone hover problem causes the user to double click a link because I want an answer that is purely CSS. All of the answers in this link require js or jQuery and the one CSS answer involves background images. I'm trying to change the opacity and that's it.

CSS 想要让自己适应移动革命，但我看到的每个用于创建悬停效果的简单touchDown"(又名 touch-hover)解决方案都需要 javascript 或 jQuery.

CSS wants to gear itself towards the mobile revolution yet every solution I see for a simple 'touchDown'(aka touch-hover) creating a hover effect requires javascript or jQuery.

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

Here's some simple code to illustrate what I mean:

.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 &野生动物园

Tested in Chrome & Safari

推荐答案

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

iOS will not trigger a link click event on the first tap if the :hover state either:

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

• Has a CSS transition animation
• Reveals child content (such as a submenu, tooltip or ::before/::after element)

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

In both cases the first tap will trigger the :hover state and a second tap will trigger the link (or click event).

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

If you remove the animation or the child elements you should get it to trigger within a single tap.

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

This great article from CSS Tricks digs a bit deeper into the issue:
The Annoying Mobile Double-Tap Link Issue

这篇关于:hover 在 ios 移动设备上变成双击而不是悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！