title: Swap image with text ( CSS or jQuery? )
body: <p>I'm trying to swap an image logo with text on mouse hover.</p>
  
  <p>I have been looking at jquery and css to create this transition, but I haven't been lucky with finding a solution. Hopefully you can help me out a bit.</p>
  
  <p>This is what I'm stuck with. </p>
  
  <p>Example
  <a href="http://jsfiddle.net/VugzA/" rel="nofollow">http://jsfiddle.net/VugzA/</a></p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="logo"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#home" title="Back to Home?"&gt;                        
  
              &lt;span class="logo_icon"&gt;
                  &lt;img src="some.gif" alt="Logo image" width="45" height="55" /&gt;
              &lt;/span&gt;
  
              &lt;span class="text"&gt;Some Text&lt;/span&gt;
  
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#logo ul {
  list-style: none;
  margin-left: -20px;
  }
  
  .logo_icon {
  display: block;
  } 
  
  .logo_icon:hover {
  display: none;
  }
  
  .text {
  display: none;
  }
  
  .logo_icon:hover + .text {
  display: block
  }
  </code></pre>