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

Question

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 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;
  }
}

Tested in Chrome & Safari

In my case I use
to display drop-down menu. There was title attribute to the tag. By removing it, I did not had to click twice. — Raitis Kupce, Jun 11 '19 at 14:30

score 22 · Accepted Answer · answered May 24 '18 at 03:43

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

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

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.

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

score 0 · Answer 2 · answered May 25 '21 at 08:05

Use the touchstart event instead of click on touchscreen devices. This example fixes the issue for iPhone and 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);
  });
}

score 0 · Answer 3 · answered Jun 25 '21 at 01:44

TL;DR: don't rely on hover to reveal things

From the source recommended in @ihodonald's answer also simply recommends not using hover at all:

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

And from 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 mobile devices turns into double-touch instead of hover

3 Answers3

TL;DR: don't rely on hover to reveal things

Linked