title: Remove all hover effects through css
body: <p>When I come down on touch devices I don't want the hover behavior. Is it possible  to disable all hover effects at once for a whole website?</p>
  
  <p>Given that you use <strong>Modernizr</strong> to detect touch and set the class. </p>
  
  <p>This is what I came up with but it gives a lot of inconsistency:</p>
  
  <pre><code>html.touch *:hover {
      color: inherit !important;
      background: inherit !important;
  }
  </code></pre>
  
  <p>Is there a way to do this with pure CSS? If not, how can it be done with javascript?</p>