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

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

HTML:

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

});

---

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

您正在对

中的所有
span
应用淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡

尝试以下操作（基于您提供的HTML）：

您正在对
中的所有
span
应用淡入淡出和淡出。更多项目库img容器
，因此所有项目的悬停状态都被激活

尝试以下操作（基于您提供的HTML）：

您正在对
中的所有
span
应用淡入淡出和淡出。更多项目库img容器
，因此所有项目的悬停状态都被激活

尝试以下操作（基于您提供的HTML）：

您正在对
中的所有
span
应用淡入淡出和淡出。更多项目库img容器
，因此所有项目的悬停状态都被激活

尝试以下操作（基于您提供的HTML）：

您可以链接jQuery中的方法，因此可以链接mouseout和mouover事件侦听器。然后，您需要在contenner中循环，而不是在image中循环，以便可以在循环中以image和span为目标

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

    });

您可以链接jQuery中的方法，因此可以链接mouseout和mouover事件侦听器。然后，您需要在contenner中循环，而不是在image中循环，以便可以在循环中以image和span为目标

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

    });

您可以链接jQuery中的方法，因此可以链接mouseout和mouover事件侦听器。然后，您需要在contenner中循环，而不是在image中循环，以便可以在循环中以image和span为目标

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

    });

您可以链接jQuery中的方法，因此可以链接mouseout和mouover事件侦听器。然后，您需要在contenner中循环，而不是在image中循环，以便可以在循环中以image和span为目标

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

    });

我想说，你应该这样做：

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

jQuery选择所有元素的原因是，因为您告诉它。在我的示例中，只有具有该事件的子级被激活

希望我能帮助你。
我想说的是，你应该这样做：

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

jQuery选择所有元素的原因是，因为您告诉它。在我的示例中，只有具有该事件的子级被激活

希望我能帮助你。
我想说的是，你应该这样做：

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

jQuery选择所有元素的原因是，因为您告诉它。在我的示例中，只有具有该事件的子级被激活

希望我能帮助你。
我想说的是，你应该这样做：

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

jQuery选择所有元素的原因是，因为您告诉它。在我的示例中，只有具有该事件的子级被激活

希望我能帮助你