当特定框悬停时，如何将jQuery实现到类的特定类

How to implement jQuery to specific class of class when when specific box is hovered?

本文关键字：jQuery 实现 悬停      更新时间：2023-09-26

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

我有一个父级.Boxdiv，里面有.BoxHoverdiv。我想让其中的两个（稍后我可能需要更多）在同一节课上。（我不想使用ID）。我的目标输出是当我悬停在.Boxdiv 1上时，只有它里面的.BoxHover会向上滑动。我的目标输出是当我将鼠标悬停在.boxdiv 2上时，只有其中的.BoxHover会向上滑动。

目前的情况是，当任何.Boxdiv悬停时，所有.BoxHoverdiv都会出现。

我的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。这是我第一次问这个问题，请耐心等待。我相信这个问题对其他人的回答会很有用

提前感谢！

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

$(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个不同的处理程序，而不是使用标志

以下是代码：

$('.Box').hover(function(){
    $(this).children('.BoxHover').slideUp();
});

就是这样。

相关文章：