更改元素背景图片而不是兄弟姐妹

Question

So I have a problem that I do know the solution to, but it would require a ton of repetitive code in the process so I know there must be a simpler way to do this. I have a list of divs that all have a main image and alt image. The alt images are hidden behind the main images and are supposed to switch with each other when the user hovers over the main image. Each div has it's own specific ID, but I really don't want to have to write the same script over and over just changing the ID. Here's my HTML (simplified but same structure minus fluff):

<section>
    <div id="one">
         <img src="#" class="main" />
         <img src="##" class="alt" style="display: none;" />
    </div>
    <div id="two">
         <img src="#" class="main" />
         <img src="##" class="alt" style="display: none;" />
    </div>
    <div id="three">
         <img src="#" class="main" />
         <img src="##" class="alt" style="display: none;" />
    </div>
</section>

and the jQuery I had written up:

<script type="text/javascript">
    $(document).ready(function () {
        $('#one img.main').mouseenter(function () {
            $('#one img.main').hide();
            $('#one img.alt').show();
        });
        $('#one img.alt').mouseleave(function () {
            $('#one img.alt').hide();
            $('#one img.main').show();
        });
    });
</script>

I really don't want to repeat for each div since there are 9 in my current page. Any suggestions?

SOLVED:

jQuery(document).ready(function () {
        //swap out main images on hover
        jQuery('.stores div img.main').mouseenter(function () {
            jQuery(this).hide();
            jQuery(this).next('img.alt').show();
        });
        jQuery('.stores div').mouseleave(function () {
            jQuery('img.alt').hide();
            jQuery('img.main').show();
        });
    });

Answer 1

You should be able to reduce it to:

$(document).ready(function () {
    $('section > div > img.main').mouseenter(function () {
        $(this).hide();
        $(this).next('img.alt').show();
    });
    $('section > div > img.alt').mouseleave(function () {
        $(this).hide();
        $(this).prev('img.main').show();
    });
});

Answer 2

You can use this selector for each first img:

$('section div img:first')

So if you put an id in the section:

$('#yourSectionId div img:first')

Answer 3

You need to write scripts mouseenter on .main and mouseleave on the div itself

<script type="text/javascript">
    $(document).ready(function () {
        $('section > div > img.main').on('mouseenter', function (e) {
            $(this).find('~ .alt').show();
            $(this).hide();
        });
        $('section > div').on('mouseleave', function (e) {
            $(this).find('.alt').hide();
            $(this).find('.main').show();
        });
    });
</script>

Answer 4

I would use:

<script>
    $(document).ready(function () {
        $('section > div').on('mouseenter', function () {
            var el = $(this);
            el.find('.main').hide();
            el.find('.alt').show();
        });
        $('section > div').on('mouseleave', function () {
            var el = $(this);
            el.find('.alt').hide();
            el.find('.main').show();
        });
    });
</script>