title: Hover multiple different element in list, show individual image
body: <p>I try to accomplish a list of elements on which you hover a different image are displayed.</p>
  
  <p>Something like this</p>
  
  <pre><code>&lt;ul id="test"&gt;
   &lt;li id="sidebarList_1"&gt;Image 1&lt;/li&gt;
   &lt;li id="sidebarList_2"&gt;Image 2&lt;/li&gt;
   &lt;li id="sidebarList_3"&gt;Image 3&lt;/li&gt;
  &lt;ul&gt;
  
  
  &lt;div id="imgDiv_1"&gt;
      &lt;img src="http://www.freemacware.com/wp-content/images/smultron1.png" /&gt;
  &lt;/div&gt;
  &lt;div id="imgDiv_2"&gt;
      &lt;img src="http://www.freemacware.com/wp-content/images/smultron2.png" /&gt;
  &lt;/div&gt;
  &lt;div id="imgDiv_3"&gt;
      &lt;img src="http://www.freemacware.com/wp-content/images/smultron3.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My jQuery looks like this</p>
  
  <pre><code>$(this).mouseover(function() {
      $("#imgDiv_1").css('visibility','visible'); 
  }),
  
  $(this).mouseout(function() { 
      $("#imgDiv_1").css('visibility','hidden'); 
  });
  </code></pre>
  
  <p>As seen it is static as it is now. I tried something like this to get the number of the id element in the li (ex sidebarList_<strong>1</strong>):</p>
  
  <pre><code>$(this).mouseover(function() {   
      var myString = $(this).val().split("_").pop();   
      $("#imgDiv_" + myString).css('visibility','visible'); 
  }),
  
  $(this).mouseout(function() { 
      var myString = $(this).val().split("_").pop();
      $("#imgDiv_" + myString).css('visibility','hidden'); 
  });
  </code></pre>
  
  <p>​But this does'nt work. How can I accomplish what Im trying to do?</p>