:在iOS移动设备上悬停变为双触摸而不是悬停 [英] :hover on ios mobile devices turns into double-touch instead of hover

问题描述

首先，这不是以下内容的克隆:

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中测试过& Safari

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

这篇关于:在iOS移动设备上悬停变为双触摸而不是悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！