title: how to store .attr("id") in a variable
body: <p>You guys have been very helpful before. I've been searching stackoverflow for a while now, but can't come up with an answer.</p>
  
  <p>Hopefully, this is a simple question. I'm trying to store the id of the currently hovered div in a variable. Then, I want to use that variable to toggle an image with the same id.</p>
  
  <p>You can see that I've tried setting the variable directly to one of the id's and that works perfectly. I've tried lots of different techniques. What am I doing wrong?</p>
  
  <p>Thanks in advance for any advice!</p>
  
  <p>I have a jsFiddle here:
  <a href="http://jsfiddle.net/SN3mz/1/" rel="nofollow">http://jsfiddle.net/SN3mz/1/</a></p>
  
  <p>JQUERY</p>
  
  <pre><code>$(document).ready(function () {
      $('.hover').mouseenter(function() {
      var currentId = $(this).attr("id");
  //  var currentId = "#story1";
      $('.pshow').hide();
      $('.feature').find(currentId).toggle();
      });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row-fluid" id="homepage-spotlight"&gt;
  
  &lt;div class="feature" align="center"&gt;
      &lt;img class="pshow" id="preview" src="http://i.imgur.com/yuiHc20.png" alt=""/&gt;
      &lt;img class="pshow" id="story1" style="display:none" src="#" /&gt;
      &lt;img class="pshow" id="story2" style="display:none" src="#" /&gt;
      &lt;img class="pshow" id="story3" style="display:none" src="#" /&gt;
      &lt;img class="pshow" id="story4" style="display:none" src="#" /&gt;
  &lt;/div&gt;
  
  &lt;div class="jdlthumbnail"&gt;
      &lt;div class="jdlh2"&gt;&lt;span&gt;Large Image Features Will Give More Pop.&lt;/span&gt;
      &lt;div style="font-size:17px"&gt;by Ebenezer Ekuban&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="hover"  id="story1"&gt;
      &lt;a href="#"&gt;&lt;h2 class="jdlh2b"&gt;Story #1 Text&lt;br&gt;Teaser&lt;/h2&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="hover"  id="story2"&gt;
      &lt;a href="#"&gt;&lt;h2 class="jdlh2b"&gt;Story #2 Text&lt;br&gt;Teaser&lt;/h2&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="hover"  id="story3"&gt;
      &lt;a href="h#"&gt;&lt;h2 class="jdlh2b"&gt;Story #3 Text&lt;br&gt;Teaser&lt;/h2&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="hover"  id="story4"&gt;
      &lt;a href="#"&gt;&lt;h2 class="jdlh2b"&gt;Story #4 Text&lt;br&gt;Teaser&lt;/h2&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>