title: Display image when hover over text
body: <p>I'm creating a simple inventory app, and currently have a table that lists all the items in stock.  I would like an image of each item to display when the user hovers over the description of each item, but there could be many different items in the list and each has it's own picture. I was testing some code with the items below but it doesn't work correctly because only image displays for both items.</p>
  
  <p>How can I get a different image to display for each item I have in a list?</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;li&gt;
  &lt;a href="#"&gt;Get Well&lt;/a&gt;
  &lt;div class="place-image"&gt;&lt;img src="../img/Get%20Well.jpg"&gt;&lt;/div&gt;
  &lt;/li&gt;
  
  &lt;li&gt;
  &lt;a href="#"&gt;I Love You&lt;/a&gt;
  &lt;div class="place-image"&gt;&lt;img src="../img/I%20Love%20You.jpg"&gt;&lt;/div&gt;
  &lt;/li&gt; 
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('a').hover(
  function() {
      $('.place-image').fadeIn('slow');
  },function() {
      $('.place-image').fadeOut('slow');
  }
  );
  </code></pre>