Question

This is the code in my html file:

    <div id="centerBlock">
        <block>
            <site style="padding-top: 10px; margin-left: 20px">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="padding-top: 10px; margin-left: 20px">
                lolol
            </textOnImage>
        </block>

        <block>
            <site style="padding-top: 163px; margin-left: 20px">
                <img src="./images/site1.png" alt="some_text"/>
            </site>
            <textOnImage style="padding-top: 163px; margin-left: 20px">
                lolol
            </textOnImage>
        </block>

    </div>

And this is my javascript:

$("block").mouseenter(function(){        
    $("site").fadeTo("slow", 0.25);
    $("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    $("site").fadeTo("slow", 1);
    $("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });

However, when I hover over one of the two block elements they both go down in opacity and when I move my mouse away from it than they both go back to the original state. I’ve searched for hours, and I’m 100% sure I’ve been searching the incorrect terms. How do I do them individually?

Answer 1

Use this to target only the block that triggered the event and then use .find() to find the desired element in that specific block. The way you were doing it before was obviously finding all site elements and all textOnImage elements in the whole page not only the ones in the block that triggered the event.

$("block").mouseenter(function(){        
    var $this = $(this);
    $this.find("site").fadeTo("slow", 0.25);
    $this.find("textOnImage").animate({ 
        opacity: "1"
    }, 600 );
});

$("block").mouseleave(function(){         
    var $this = $(this);
    $this.find("site").fadeTo("slow", 1);
    $this.find("textOnImage").animate({ 
        opacity: "0"
    }, 600 );
 });