遍历列表中的每个图像并使用jQuery定义悬停状态

Question

I'm trying to do something very simple: make a border-bottom under an image in a slider when the user hovers over it. I'm writing a jQuery function for this because I want to make something hover whose element is outside of a selector I'm selecting with jQuery. My code is as follows:

HTML:

<div class="more-projects-gallery">
    <figure class="more-projects-gallery-img-container">
        <a href=""><img src="holder.js/120x120" alt="img"></a>
        <span></span>
    </figure>
    <figure class="more-projects-gallery-img-container">
        <a href=""><img src="holder.js/120x120" alt="img"></a>
        <span></span>
    </figure>
    <figure class="more-projects-gallery-img-container">
        <a href=""><img src="holder.js/120x120" alt="img"></a>
        <span></span>
    </figure>
    <figure class="more-projects-gallery-img-container">
        <a href=""><img src="holder.js/120x120" alt="img"></a>
        <span></span>
    </figure>
    <figure class="more-projects-gallery-img-container">
        <a href=""><img src="holder.js/120x120" alt="img"></a>
        <span></span>
    </figure>
    <figure class="more-projects-gallery-img-container">
        <a href=""><img src="holder.js/120x120" alt="img"></a>
        <span></span>
    </figure>
</div>

CSS (or SCSS):

.more-projects-gallery-img-container {
    a {
        cursor: default;
    }
    img {
        cursor: pointer;
    }
    span {
        display: none;
        @include size(120px 5px);
        background-color: $light-blue;
        @include position(absolute, null null -14px 42px);
    }
}

The jQuery:

$(function galleryImageHover() {

    var $galleryImageContainer = $('.more-projects-gallery-img-container');
    var $galleryImage = $('.more-projects-gallery-img-container a');
    var $galleryImageSpan = $('.more-projects-gallery-img-container span');

    $galleryImageContainer.each(function(){
        $galleryImage.on("mouseover", function(){
            $galleryImageSpan.fadeIn(300).show();
        });
    });
    $galleryImageContainer.each(function(){
        $galleryImage.on("mouseout", function(){
            $galleryImageSpan.fadeOut(300).hidden();
        });
    });

});

The problem I'm having is that when you hover over any image, the hover state is activated for ALL the images in the slider instead of just the one image the user is currently moused over in. Any help would be greatly appreciated. I've been at this for a while and just can't seem to get it to work.

Answer 1

You are applying the fadeIn and fadeOut to all the span s in the .more-projects-gallery-img-container , hence hover state is activated for ALL.

Try this (based on the HTML you have provided):

$(function galleryImageHover() {

    var $galleryImageContainer = $('.more-projects-gallery-img-container');
    var $galleryImage = $('.more-projects-gallery-img-container a');
    //var $galleryImageSpan = $('.more-projects-gallery-img-container span'); //You won't need this.

    $galleryImageContainer.each(function(){
        $galleryImage.on("mouseover", function(){
            $(this).next().fadeIn(300).show(); // changed the selector here to select the next span rather than all the spans
        });
    });
    $galleryImageContainer.each(function(){
        $galleryImage.on("mouseout", function(){
            $(this).next().fadeOut(300).hidden(); // changed the selector here to select the next span rather than all the spans
        });
    });

});

Answer 2

You can chain the methods in jQuery, So chain your mouseout and mouover event listeners. Then You need to loop through the conteiner instead image so that you can target both image and span inside the loop.

 $(function galleryImageHover() {

        var $galleryImageContainer = $('.more-projects-gallery-img-container');

        $galleryImageContainer .each(function(){
            $(this).find("a").on("mouseover", function(){
                $(this).find('span').fadeIn(300).show();
            }).on("mouseout", function(){
                $(this).find('span').fadeOut(300).hidden();
            });
        });

    });

Answer 3

I would say, that you should do something like this:

$galleryImageContainer.on("mouseover", 'a', function(){
   $(this).parent().children('span').fadeIn(300).show();
});

The reason that jQuery selects all of the elements is, because you tell it to. In my example only the child with the event is activated.

Hope i could help you.