悬停图像时显示所有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);

由于您希望fadeIn .info .hardware而不是所有{{1}}。