Question

I’m trying to duplicate an old site’s function as lean as possible, and I’m running into an issue with .hover and .each. 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.

Relevant code:

<script>
(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);
<script>
<div class="home-center">
    <div class="home-right">
        <img class="home-icon" src="/images/homepage/home-icon-off.png" />
    </div>
    <div class="home-link">
        <img class="home-img" src="/images/homepage/home-downloads-off.png" />
    </div>
</div>

Answer 1

The leanest way to duplicate this is to use CSS, without resorting to JavaScript at all:

<style>
  .home-center .off {
    display: inline;
  }
  .home-center:hover .off {
    display: none;
  }
  .home-center .on {
    display: none;
  }
  .home-center:hover .on {
    display: inline;
  }
</style>
<div class="home-center">
  <div class="home-right">
    <img class="home-icon off" src="/images/homepage/home-icon-off.png" />
    <img class="home-icon on" src="/images/homepage/home-icon-on.png" />
  </div>
  <div class="home-link">
    <img class="home-img off" src="/images/homepage/home-downloads-off.png" />
    <img class="home-img on" src="/images/homepage/home-downloads-on.png" />
  </div>
</div>

I did not test this so it might be wrong, but you get the idea.

I think this works in IE7+ at least, but quite possibly in IE6 or even IE5 too.