javascript - 悬停特定框时如何将 jQuery 实现到特定类的类？

Question

当特定框悬停时，我想对特定类的类实现 jQuery？

我有一个父 .Box div，里面有 .BoxHover div。我想要其中的 2 个(稍后我可能需要更多)具有相同的类。 (我不想使用 ID)。我的目标输出是当我将鼠标悬停在 .Box div 1 上时，只有其中的 .BoxHover 会向上滑动。我的目标输出是当我将鼠标悬停在 .Box div 2 上时，只有其中的 .BoxHover 会向上滑动。

目前，发生的情况是，当任何 .Box div 悬停时，所有 .BoxHover div 都会出现。

我的 HTML:

<!--1st pic-->
<div class="Box">
    <div class="BoxPhoto">
        <img src="http://placehold.it/225x225/000000/ffffff&text=instagram_photo1" />
    </div>
    <div class="BoxHover">
            <img src="http://placehold.it/120x120/cccccc/000000&text=user_photo1" />
    </div>
</div>
<!--2nd pic-->
<div class="Box">
    <div class="BoxPhoto">
        <img src="http://placehold.it/225x225/ff0000/ffffff&text=instagram_photo2" />
    </div>
    <div class="BoxHover">
            <img src="http://placehold.it/120x120/cccccc/ff0000&text=user_photo2" />
    </div>
</div>

我的 CSS:

.Box, .BoxHover {
    height:225px; 
    width: 225px; 
    overflow: hidden;
    float: left;
    position: relative;
}
.BoxHover {
    position: absolute; 
    left: 0;
    bottom: 0px;
    text-align: center; 
    margin: 20px auto -225px auto;
    z-index: 3;
    opacity: 0;
}

我的脚本:

$(document).ready(function () {
    var flag = 1;
    $(".Box").hover(function () {
        if (flag == 1) {
            $('.BoxHover').stop(true).animate({ 'margin-bottom': 0, 'opacity': '1' }, { queue: false, duration: 300 });
            flag = 0;
        }
        else {
            $('.BoxHover').stop(true).animate({ 'margin-bottom': -225, 'opacity': '0' }, { queue: false, duration: 300 });
            flag = 1;
        }

        return false;
    });
}); 

Bdw，我最近加入这里，还没有真正进入 jQuery。这是我第一次提问所以请耐心等待。而且我相信这个问题对其他人回答很有用。 :)

提前致谢!

Answer 1

问题是您的目标是 hover 处理程序中的所有 .BoxHover 元素，而不是仅针对作为后代的 .BoxHover 元素悬停的 .Box.

$(document).ready(function () {
    $(".Box").hover(function () {
        $(this).find('.BoxHover').stop(true).animate({
            'margin-bottom': 0,
                'opacity': '1'
        }, {
            queue: false,
            duration: 300
        });
    }, function () {
        $(this).find('.BoxHover').stop(true).animate({
            'margin-bottom': -225,
                'opacity': '0'
        }, {
            queue: false,
            duration: 300
        });
    });
});

演示:Fiddle

还为 mouseenter 和 mouseleave 事件使用 2 个不同的处理程序，而不是使用标志