javascript - 将鼠标悬停在 img 上时会显示所有 div

Question

我有这个:

$(window).load(function(){
    $(".hardware").hover( function (e) {
        $(this).toggleClass('hover', e.type === 'mouseenter');
        $(".info").fadeIn(500);
    });
}); 

还有我的 html:

<section>
    <div class="hardware banner1 top">
        <img src="files/images/sakesalverda.png" alt="" class="action"/>
        <div class="info">sakesalverda.nl</div>
    </div>
</section>

<section>
    <div class="hardware banner2">
        <img src="files/images/ptsd-monitor.png" alt="" class="action"/>
        <div class="info">ptsd-monitor.com</div>
    </div>
</section>

但是当您将鼠标悬停在 .hardware.banner1 上时，它将显示两个 div。我只是不想让它显示 banner 中的 div，而不是 banner2 中的 div。

Answer 1

您应该使用:

$(this).find('.info').fadeIn(500);

因为您想要淡入.hardware内的.info，而不是全部。