Question

我正在尝试做一些非常简单的事情：当用户将鼠标悬停在滑块上时，在滑块中的图像下方设置边框。我正在为此编写一个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();
        });
    });

});

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

Answer 1

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

试试这个（基于您提供的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
        });
    });

});

Answer 2

你可以在jQuery中链接方法，所以链接你的mouseout和mouover事件监听器。然后，您需要循环遍历conteiner而不是图像，以便您可以在循环内定位图像和跨度。

 $(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

我想说，你应该这样做：

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

jQuery选择所有元素的原因是，因为你告诉它。在我的示例中，仅激活具有事件的孩子。

希望我能帮到你。

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

3 个答案: