CODEWITHSUNDEEP
javascriptjquerycsshover
jtarr523
jtarr523

Reputation: 361

Iterating over each image in a list and define a hover state using jQuery

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.

Upvotes: 0

Views: 358

Answers (3)

herbertp.
herbertp.

Reputation: 192

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.

Upvotes: 1

Subash Selvaraj
Subash Selvaraj

Reputation: 3385

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();
            });
        });

    });

Upvotes: 1

Chandu
Chandu

Reputation: 82913

You are applying the fadeIn and fadeOut to all the spans 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
        });
    });

});

Upvotes: 1

Related Questions