title: only affect one element [jquery]
body: <p>I have a set of code like this:</p>
  
  <pre><code>$('.rightMainP').hover(function() {
      $('#rightMain img:first-child').attr('src', '../Images/whiteSidewaysNub.png')
  }, function() {
      $('#rightMain img:first-child').attr('src', '../Images/graySidewaysNub.png')
  });
  </code></pre>
  
  <p>I also have multiple <code>#rightMain</code> divs.  When I hover over one, I want it's respective image to change.  </p>
  
  <p>My problem is that when I hover over the <code>rightMain</code> div, every single image of every <code>rightMain</code> div changes, instead of only the image from the <em>first</em> <code>rightMain</code> div.  </p>
  
  <p>How can I make it so hovering over one element out of multiple elements changes only the image of that respective element and not all of them?</p>
  
  <pre><code>    &lt;div id="answers"&gt;
          &lt;div id="leftInfo"&gt;
          &lt;img src="../Images/junglrLarge.png"/&gt;&lt;a href=""&gt;TESTUSER&lt;/a&gt;&lt;br /&gt;&lt;span&gt;Level 6&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="rightMain"&gt;
                  &lt;img class="graySidewaysNub" src="../Images/graySidewaysNub.png"&gt;&lt;/img&gt;
                  &lt;p class="rightMainP"&gt;This is my answer!&lt;/p&gt;
                  &lt;div class="rate"&gt;&lt;img src="../Images/incLike.png"/&gt;0 &amp;nbsp;&amp;nbsp;&lt;img src="../Images/alert.png"/&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="leftInfo"&gt;
          &lt;img src="../Images/junglrLarge.png"/&gt;&lt;a href=""&gt;TESTUSER&lt;/a&gt;&lt;br /&gt;&lt;span&gt;Level 6&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="rightMain"&gt;
                  &lt;img class="graySidewaysNub" src="../Images/graySidewaysNub.png"&gt;&lt;/img&gt;
                  &lt;p class="rightMainP"&gt;Wow, I think this above answer is stupid...&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;script&gt;
  
  $('.answerSpace').bind('focus', function(){ $('.opacProf').removeClass("opacProf").addClass('normProf');
  
  $('.answerSubmit').stop().animate({
  
      opacity: "1"
  
      }, 500 );
  $('.answerSpace').css({'background-color' : '#ffffff', 'color' : '#333'}); });
  
  
  $('.rightMainP').hover(function(){$('#rightMain img:first-child').attr('src','../Images/whiteSidewaysNub.png')},function(){$('#rightMain img:first-child').attr('src','../Images/graySidewaysNub.png')});
  
  
  &lt;/script&gt;
  </code></pre>