title: :hover on ios mobile devices turns into double-touch instead of hover
body: <p>First off, this is not a clone of: <a href="https://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link">iPad/iPhone hover problem causes the user to double click a link</a>
  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. </p>
  
  <p>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. </p>
  
  <p>Here's some simple code to illustrate what I mean:</p>
  
  <pre><code>.btn {
    border-radius: 5px;
    display: block;
    opacity: 1; &lt;--from
    background: red;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    &amp;:hover {
      opacity:.7; &lt;--to
      transition: opacity .2s ease-out; &lt;--fun fade animation :)
      -moz-transition: opacity .2s ease-out;
      -webkit-transition: opacity .2s ease-out;
      -o-transition: opacity .2s ease-out;
    }
  }
  </code></pre>
  
  <p>Tested in Chrome &amp; Safari</p>