title: How to make hover state display: none; work on touch / mobile devices
body: <p>How to make hover state <code>display: none;</code> work on touch / mobile devices:
  I have a simple hover state that shows two links on hover. I was wondering how to make this work on touch devices? Do you need javascript for this or can it be done through CSS? </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.share-btn {
    display: inline-block;
    position: relative;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    width: auto;
    padding: 0 5px;
    cursor: pointer;
  }
  
  .share-btn a:link,
  .share-btn a:visited {
    color: #999999;
  }
  
  .share-btn a:hover,
  .share-btn a:focus {
    color: white;
   }
  
  .share-btn .facebook-share,
  .share-btn .twitter-share {
    display: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  
  .share-btn .facebook-share {
    margin-left: 10px;
  }
  
  .share-btn:hover span {
    display: none;
  }
  
  .share-btn:hover .facebook-share {
    display: inline-block;
  }
  
  .share-btn:hover .twitter-share {
    display: inline-block;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="share-btn"&gt;&lt;span&gt;share&lt;/span&gt;
      &lt;a href="https://twitter.com/home?status=http://.." class="twitter-share" target="_blank"&gt;Twitter&lt;/a&gt;
      &lt;a href="https://www.facebook.com/sharer/sharer.php?u=http://.." class="facebook-share" target="_blank"&gt;Facebook&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>