CODEWITHSUNDEEP
jqueryhtml
Dubstepzedd
Dubstepzedd

Reputation: 148

JQuery selects the entire class, what's the solution?

So on my site I have 6 different images, they all share the same class: imageContent. I also added a div with a transparent color with a text over it. I only want to show this "div" when I enter the image I hover. I added JQuery, which I am a total noob at, and tried my best. However when I hover over one of the images they all display the div. I only want to display it on the image I hover on.

Here is a an image of the problem: Image of two of the images displaying the transparent text

As you can see on the image both of the images display the transparent text when only one should! I did a lot of research but didn't find any solution, probably because I didnt phrase my question correctly, so if this has already been asked I would be happy to be redirected to that post! Thanks!

I have a lot of HTML and CSS and wouldn't help a lot in my opinion to share code that isn't affected. Therefore I will post the affected code:

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 (The two images that right now have the transparent text, I haven't added it to the rest yet)

    <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>

Summary: How do I select one of the images if they are in the same class?

Thanks in advance!

Upvotes: 2

Views: 39

Answers (1)

djcaesar9114
djcaesar9114

Reputation: 2137

Use $(this):

$(document).ready(function() {

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

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

Upvotes: 3

Related Questions