title: Show/hide span on hover
body: <p>I'm trying to show a span when an <code>li</code> with the class of <code>.image</code> is hovered, then preferably hide it once the mouse is removed from the li. I'm using the code below but to no avail.</p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="image"&gt;
      &lt;span class="post_meta"&gt;Test &amp;nbsp; 40in x 9in&lt;/span&gt;
      &lt;img src="http://web.com"&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>THE CSS</strong></p>
  
  <pre><code>span.post_meta {
      background: none repeat scroll 0 0 #000000;
      bottom: 7px;
      color: #FFFFFF;
      display: block;
      padding: 0 2px;
      position: absolute;
      right: 86px;
  }
  </code></pre>
  
  <p><strong>The jQuery</strong></p>
  
  <pre><code>$docuemnt.ready() {
  $(function() {
     $("li.image").hover(function() {
      $(this).parent().next("span").show();
      },function(){
      $(this).parent().next("span").hide();
    });
   });  
  }); 
  </code></pre>