Question

I am web-designer, not a programmer and a newbie in Javascript / jQuery (although I do have experience with PHP )

I am having a problem understanding why I can not seem to target the right div for a hover effect.

Fiddle is here :
http://jsfiddle.net/obmerk99/F6wJs/

When I target a certain div class (.mas), the effect works just fine
But when I target a second div class (.meta2 – absolute positioned within the boundaries of the first – .mas ) the effect does not work.

(plain words – I want the effect to be triggered by the thumb, and not by the large image.)

the code is the same, so it is not a syntax error – I am sure I am missing something fundamental about understanding jQUery.

Care to explain ??

EDIT I :

After understanding what @Rick explained – I must say that my problem was a bit more complicated , I just posted the simple version because i thought it is enough.

The real markup has MORE than one element of the said classes.

If I remove “,this” from the code, it will trigger ALL of them ..

New Fiddle Here :
http://jsfiddle.net/obmerk99/F6wJs/1/

Answer 1

The issue is actually on the fade-in. In the JQuery in your fiddle, you have things like:

jQuery(".meta",this).fadeIn(400);

That tells JQuery to look for .meta within this, and the keyword this is here referring to the JQuery object returned by the outer selector.

In other words, if your outer selector is .mas, JQuery only searches for .meta within .mas. If the outer selector is .meta2, it only searches for .meta within .meta2. And, of course, .meta is within .mas, but it is not within .meta2, hence the issue you’re having.

This can be fixed by simply removing the second parameter (this) from each fade call. So the line earlier becomes:

jQuery(".meta").fadeIn(400);

The updated fiddle is here: http://jsfiddle.net/qsQWU/1/

Edit:

As pointed out by the other answers and the question edit (thanks for the heads-up), I wasn’t thinking about the possibility of this needing to be done on multiple elements individually. They are correct; the above solution will not work for that scenario. Their alternatives work, but I also want to offer a third possibility: replacing this with jQuery(this).parent(), so that the context just becomes one level higher.

The new fiddle, modified from the question edit, is here: http://jsfiddle.net/GU8Bj/