title: What is a better workaround for transitioning background images on hover?
body: <p>I'm creating a menu where each link has it's own unique icon. The icons are white (default state) and red (hover state), split up between two different sprite files (e.g. jQuery UI style where both files are identical except for the color.) I'm trying to apply a transition effect for the hover, but since it can't be done simply with jQuery or CSS3 I've looked into other methods.</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;
        &lt;a href=""&gt;&lt;span&gt;&lt;/span&gt;Menu Item 1&lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
        &lt;a href=""&gt;&lt;span&gt;&lt;/span&gt;Menu Item 2&lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
        &lt;a href=""&gt;&lt;span&gt;&lt;/span&gt;Menu Item 3&lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have found examples where you use multiple divs or spans and adjust the opacity and apply a transition, but then you end up with a bunch of mark up. </p>
  
  <pre><code>&lt;ul&gt;
     &lt;li&gt;
        &lt;a href=""&gt;
           &lt;span class="default"&gt;&lt;/span&gt;
           &lt;span class="hover"&gt;&lt;/span&gt;Menu Item 1
        &lt;/a&gt;
     &lt;/li&gt;
     &lt;li&gt;
        &lt;a href=""&gt;
           &lt;span class="default"&gt;&lt;/span&gt;
           &lt;span class="hover"&gt;&lt;/span&gt;Menu Item 2
        &lt;/a&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there a simpler way to achieve this effect or is this my only option?</p>