title: How to preload css :hover background-images
body: <p>I have multiple background-images that change on hover.</p>
  
  <p>Example:</p>
  
  <pre><code>.class1 {
      background: url(/img/img-1.jpg) no-repeat top center;
  }
  .class1:hover {
      background: url(/img/img-2.jpg) no-repeat top center;
  }
  </code></pre>
  
  <p>The images flicker now, as they are loaded the second you hover over them.
  I've tried using sprites, but that doesn't work, as the images change size for mobile devices.</p>
  
  <p>Any ideas? Could be css or jquery, doesn't matter much</p>