title: Why is there a slight delay when switching images on hover?
body: <p>Hello I have a div with a background image on my website set up so when you hover over it, it changes background images. </p>
  
  <p>It works correctly but the only issue is that there is a slight delay when switching images, probably a 0.2 second delay. So when you hover over it, the div turns blank for 0.2 seconds and then the new image appears. </p>
  
  <p>Does anyone know what is causing this issue? I am thinking it has to do with the speed in which the hover image loads, if that is the case then there probably isn't a solution for this issue and I will just have to live with it.</p>
  
  <p>There is no javascript or jQuery associated with the div at all.</p>
  
  <p>Here is my code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="video-button"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.video-button {
      background: url('images/playbutton.png') center center no-repeat;
      height: 113px;
      width: 113px;
  }
  
  .video-button:hover {
      background: url('images/playbutton-h.png') center center no-repeat;
  }
  </code></pre>