: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 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

Solution

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