jQuery - can't get the 'this' to work

i've managed to get a simple animation working so when I roll over my div with the class "gallery-wrap", an image with the class "magnifier" appears on top.

My problem is I have lots of divs with the class "gallery-wrap" and lots of images which have the class "magnifier".

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $("img.magnifier").show();            
            }, function() {
        $("img.magnifier").hide();
    });

The img.magnifier is located inside the .gallery-wrap parent div, not inside .gallery-wrap.

I need it so this does only the current hovered element, which it is doing already, but its animating all the img.magnifier on the page?

I thought it would maybe look like this...

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $(this).parent("img.magnifier").show();            
            }, fu开发者_运维问答nction() {
        $(this).parent("img.magnifier").hide();
    });

But cannot get it to work.

Any ideas would be a huge help thanks.

Shouldn't it be like this:

$('.gallery-wrap').hover(function() {   
    $(this).find("img.magnifier").show();            
        }, function() {
    $(this).find("img.magnifier").hide();
});

If I understand correctly, img.magnifier is a child of .gallery-wrap, so find() should be used instead of parent().

You were close with:

$(this).parent("img.magnifier").show(); 

Change it to:

$(this).parent().find("img.magnifier").show(); 

Then it should work. Do the same thing with your hide() of course.

Can you assign matching id values to the gallery-wrap and associated img.magnifier?

$('.gallery-wrap').hover(function() {   

    var id = $(this).attr('id');
    $("img.magnifier#"+id).show();            
        }, function() {
    $("img.magnifier#"+id).hide();
});

As img.magnifier is not inside .gallery-wrap, find() will not do it here.

Try this one:

    $("img.magnifier").hide(); //this hides the image on page load

    $('.gallery-wrap').hover(function() {   
        $(this).parents("img.magnifier").last().show();            
            }, function() {
        $(this).parents("img.magnifier").last().hide();
    });

The .last() is necessary if you have more than just one img.magnifier in the parents() collection.

You need to change:

$(this).parent("img.magnifier")

to:

$(this).find("img.magnifier")

since the img tag is a child element of your gallery-wrap.