Question

我有3个同一个类的div，这意味着当我将鼠标悬停在一个上时，它会激活所有这些。我看了一下它说如果你使用$（this）.find（）它会解决这个问题。但是，当我这样做时，我的代码不起作用，我想知道是否有人能告诉我我做错了什么？以及如何使它只能一次激活一个div。

<div class="indvWorkwrap col-lg-4">
    <div class="work">
        <div class="front"><img src="images/work1.png"></div>
        <div class="back"><img src="images/work1_hover.png"></div>
        <div class="details">
            <header>
                <h1>MAGAZINE STARTUP for THE SAUCE</h1>
                <p>Branding, web & magazine layout</p>
            </header>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="work">
        <div class="front"><img src="images/work1.png"></div>
        <div class="back"><img src="images/work1_hover.png"></div>
        <div class="details">
            <header>
                <h1>MAGAZINE STARTUP for THE SAUCE</h1>
                <p>Branding, web & magazine layout</p>
            </header>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="work">
        <div class="front"><img src="images/work1.png"></div>
        <div class="back"><img src="images/work1_hover.png"></div>
        <div class="details">
            <header>
                <h1>MAGAZINE STARTUP for THE SAUCE</h1>
                <p>Branding, web & magazine layout</p>
            </header>
        </div>
    </div>
</div>

Jquery代码：

$('.front').mouseenter(function () {
    $(this).find('.details header').delay(100).animate({
        bottom: '-100px'
    });
    $(this).find('.back').delay(400).fadeIn(200);
});

$('.back').mouseleave(function () {
    $(this).delay(100).fadeOut(200);
    $(this).find('.details header').delay(400).animate({
        bottom: 0
    });
});

Answer 1

您需要siblings()和next()而不是查找。在后代查找搜索时，您需要搜索兄弟姐妹。

$('.front').mouseenter(function () {
    $(this).siblings ('.details').find('header').delay(100).animate({
        bottom: '-100px'
    });
    $(this).next('.back').delay(400).fadeIn(200);
});

鼠标悬停在单独的div上

1 个答案: