title: Simple HTML5/CSS3 background image transition on mouse hover
body: <p>I'm trying to understand the <em>simplest</em> background transition possible using <em>only</em> <strong><code>HTML5</code></strong> and <strong><code>CSS3</code></strong>. Searching through stackoverflow I've learned it can be easily implemented using external libraries such as <code>jQuery</code> but for this project I've decided not relying on any of those.</p>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;nav&gt; 
    &lt;ul&gt; 
      &lt;li&gt;&lt;a id="foobar" href="http://www.google.com/search?q=foobar"&gt;Foobar&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
  &lt;/nav&gt; 
  </code></pre>
  
  <p><strong>Styles</strong></p>
  
  <pre><code>body {
    background: url('background-default.png'), no-repeat;
  }
  #foobar a:hover {
     background: url('background-hover.png'), no-repeat;
    -webkit-transition: // TODO;
    -moz-transition: // TODO;
    -o-transition: // TODO;
    -ms-transition: // TODO;
    transition: // TODO;
  }
  </code></pre>