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);
    });
});