jquery - 用于多种用途的 FadeIn 类

Question

我想要一个简单的 Jquery 解决方案，用于将鼠标悬停在“容器”类上并淡入“叠加层”。在这个简单的 Jquery 代码中，将显示所有“容器”的所有“覆盖”。有没有人知道一个简单的解决方案来淡化这个类中“覆盖”的“覆盖”？

谢谢。

$('.overlay').hide();
$('.container').hover(function() {
    $('.overlay').fadeToggle(300);
});

<!-- container 01 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<!-- container 02 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<!-- container 03 -->
<div class="container">
    <p>Lorem ipsum dolor sit amet</p>   
    <div class="overlay">
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

Answer 1

$('.container').hover(function() {
    $(this).find('.overlay').fadeToggle(300);
});

http://jsbin.com/owehim/1/