JQuery выбирает весь класс, какое решение?

Question

Так что на моем сайте у меня есть 6 разных изображений, все они имеют один и тот же класс: imageContent . Я также добавил div с прозрачным цветом с текстом над ним. Я хочу показать этот «div» только тогда, когда я ввожу изображение, которое я наведу . Я добавил JQuery, в котором я полный нуб, и постарался изо всех сил. Однако, когда я наведите курсор на одно из изображений, все они показывают div. Я только хочу отобразить это на изображении, на котором я наведен.

Вот изображение проблемы:

Как вы видите на изображении, оба изображения отображают прозрачный текст, когда только один должен! Я провел много исследований, но не нашел никакого решения, возможно, потому, что я не правильно сформулировал свой вопрос, поэтому, если он уже был задан, я был бы рад, чтобы меня перенаправили на этот пост! Спасибо!

У меня много HTML и CSS, и я не очень помог бы, по моему мнению, поделиться кодом, который не затронут. Поэтому я опубликую соответствующий код:

JavaScript / JQuery

<script type="text/javascript">

    //JQuery
    $(document).ready(function() {

        $(".imageContainer").mouseenter(function() {
            $(".content").fadeTo("slow",1);
        });

        $(".imageContainer").mouseleave(function() {
            $(".content").fadeTo("slow",0);
        });
    });

</script>

HTML (два изображения, которые сейчас есть прозрачный текст, я еще не добавил его к остальным)

    <div class="row"> 

        <div class="col-xl-4 col-lg-4 col-md-6 col-xs-12">
            <div class="imageContainer">
                <img src="SlutProjektBilder/img_1.JPG"alt="Image 1" class="imageContent"> 
            <div class="content">
                <h1>Content</h1>
                <p>text here like idk</p>
            </div>
        </div>


        </div>

        <div class="col-xl-4 col-lg-4 col-md-6 col-xs-12">
            <div class="imageContainer">
                <img src="SlutProjektBilder/img_2.JPG" alt="Image 2" class="imageContent">
                <div class="content">
                    <h1>Content</h1>
                    <p>text here like idk</p>
                </div>
            </div>
        </div>

Резюме: Как выбрать одно из изображений, если они находятся в одном классе ?

Заранее спасибо!

Answer 1

Использование $(this):

$(document).ready(function() {

    $(".imageContainer").mouseenter(function() {
        $(this).find(".content").fadeTo("slow",1);
    });

    $(".imageContainer").mouseleave(function() {
        $(this).find(".content").fadeTo("slow",0);
    });
});