javascript - 迭代列表中的每个图像并使用 jQuery 定义悬停状态

Question

我正在尝试做一些非常简单的事情:当用户将鼠标悬停在 slider 上时，在 slider 中的图像下方制作一个底部边框。我正在为此编写一个 jQuery 函数，因为我想制作一些元素悬停在我使用 jQuery 选择的选择器之外的东西。我的代码如下:

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

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

});

我遇到的问题是，当您将鼠标悬停在任何图像上时，会为 slider 中的所有图像激活悬停状态，而不仅仅是用户当前将鼠标悬停在其中的图像。任何帮助将不胜感激.我已经在这方面工作了一段时间，但似乎无法让它发挥作用。

Answer 1

您正在将 fadeIn 和 fadeOut 应用到 .more-projects-gallery-img-container 中的所有 span，因此所有的悬停状态都已激活。

试试这个(基于您提供的 HTML):

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

});