Jquery 用于多种用途的FadeIn类

我想要一个简单的Jquery解决方案，用于悬停在类“container”上并在“overlay”中淡出。在这个简单的Jquery代码中，将显示所有容器的所有“overlay”。是否有人知道一个简单的解决方案，用于在这个类中淡出“覆盖”的“覆盖”

谢谢

$('.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>

$（'.overlay'）.hide（）；
$（'.container'）.hover（函数（）{
$（'.overlay'）.fadeToggle（300）；
});
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

---

嘿，老兄，我已经试过这个方法了。但它不起作用：（不知道为什么！将显示所有的“覆盖”。您对此有解释吗？或其他解决方案吗？

$（'.overlay'）

使用此类搜索所有元素。这就是为什么在您的示例中所有覆盖都会被切换。在我的示例中，我们搜索

$内的所有覆盖（此）

哪一个是悬停的

.container

。嘿，伙计，我已经尝试过这个解决方案。但是它不起作用：（不知道为什么！所有的“覆盖”都会显示出来。你对此有解释吗？或者其他解决方案吗？

$（“.overlay”）

使用该类搜索所有元素。这就是为什么在您的示例中所有覆盖都被切换。在我的示例中，我们搜索

$（此）

中的所有覆盖，它是悬停的

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