title: Why does my link stay on its hover state when on a mobile device?
body: <p>I could very well have lost it. </p>
  
  <p>My :hover, a:link states do not seem to work on a mobile. </p>
  
  <p>I have a fixed nav at the bottom of the screen: </p>
  
  <pre><code>/* nav */
  nav#desktop {
      position: fixed;
      width: 100%;
      left: 0px;
      bottom: 0px;
      background-color: transparent;
      padding-top: 28px;
      z-index: 1002
  }
  nav#desktop &gt; ul {
      position: relative;
      height: 25px;
      overflow: hidden;
      float: left;
      margin: 0 0 28px 2.3%
  }
      @media only screen and (max-width: 675px) {
          nav#desktop &gt; ul {
              position: relative;
              height: 25px;
              overflow: hidden;
              float: left;
              margin: 0 0 28px 3%
          }
      }
  nav#desktop &gt; ul &gt; li {
      width: 200px;
      font-size: 19px;
      font-weight: 400;
      float: left;
      margin-right: 12px;
      position: abolute;
      bottom: 0px;
      overflow: hidden
  }
  nav#desktop a {
      color: #000
  }
  nav#desktop a:hover {
      color: #8974A7
  }
  </code></pre>
  
  <p>On a desktop the <code>hover</code> works successfully, as in when you hover it shows purple and then goes back to black. </p>
  
  <p>Why on a mobile, when the <code>li</code> item is clicked, does it go purple, and then stay purple. </p>
  
  <p>I did have: </p>
  
  <pre><code>nav#desktop a {
      color: #000
  }
  nav#desktop a:hover, a:focus {
      color: #8974A7
  }
  </code></pre>
  
  <p>Thinking <code>:focus</code> was behind it, having removed it now; still no change. </p>
  
  <p>Interestingly, I have: </p>
  
  <pre><code>#mobile-open #mobile-container &gt; ul {
      position: relative
  }
  #mobile-open #mobile-container &gt; ul &gt; li {
      margin: 0px;
      padding: 0px 0px 15px 0px;
  }
  #mobile-open #mobile-container &gt; ul &gt; li:last-child {
      margin: 0px;
      padding: 0px
  }
  #mobile-open #mobile-container a {
      color: #fff;
      text-decoration: none;  
  }
  #mobile-open #mobile-container a:hover {
      color: #ccc
  }
  </code></pre>
  
  <p>For links within my open menu, and the two states work as expected.</p>