title: Hover over a div and change two images with jQuery?
body: <p>I'm trying to duplicate an old site's function as lean as possible, and I'm running into an issue with <code>.hover</code> and <code>.each</code>.  At this point, it will swap the images on mouseover, but for some reason isn't swapping back on mouseout.  I know it's something syntax-related, but as I'm getting over a cold my brain just isn't catching it.</p>
  
  <p>Relevant code:</p>
  
  <pre><code>&lt;script&gt;
  (function($) {
      $(".home-center").hover( function (){
          $("img", this).each(
              function() {
                  $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png"));
              },
              function() {
                  $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png"));
              }
          );
      });
  })(jQuery);
  &lt;script&gt;
  &lt;div class="home-center"&gt;
      &lt;div class="home-right"&gt;
          &lt;img class="home-icon" src="/images/homepage/home-icon-off.png" /&gt;
      &lt;/div&gt;
      &lt;div class="home-link"&gt;
          &lt;img class="home-img" src="/images/homepage/home-downloads-off.png" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>