title: Remove the :hover event on mobile devices
body: <p>I have the <code>:hover</code> event working on a website, but I have a problem when you use the system on mobile devices.</p>
  
  <p>Is there a way to remove it in css or js? I have tried so many things but I have no luck.</p>
  
  <p>I tried modernizr.com and media queries with no success.</p>
  
  <p><strong>my sass code:</strong></p>
  
  <pre><code>ul {
      li {
        padding: 20px;
         &amp;:hover {
          background-color: $red;
          color: $black;
        }
      }
    }
  </code></pre>
  
  <p><strong>media query:</strong></p>
  
  <pre><code>@media (max-width: $screen-sm-min) {
    ul {
      li {
        &amp;:hover {
          color: inherit; 
          cursor: pointer;
        }
      }
    }
  }
  </code></pre>
  
  <p><strong>sass mq variable:</strong></p>
  
  <pre><code>$screen-sm-min: 768px;
  </code></pre>