Hover over a div and change two images with jQuery?
<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>
