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

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

Answer 1

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

Answer 2

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.

Answer 3

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