Mouseenter on 2 different pictures

Question

For my questions I provide you with this fiddle I created: http://jsfiddle.net/6x96w/

If you hover over the first person you can see that a black box hovers over the person, but the black box also hovers over the person below. I am trying to make the black box only appear on the first person and disappear when I move the mouse over it. Then when I hover on person no.2 the black box should only hover on that person.

So in short, I want the black box only to appear on the person I am hovering over.

Is this doable without creating extra long code of having different class for each person ?

The code for the function as it stands now is:

        $('.Claus').mouseenter(function(){
        $('.clickMe').fadeIn(500);      
        });
        $('.clickMe').mouseleave(function(){
        $(this).fadeOut(500);
        });

.clickMe has a default CSS of

       display:none

I can see that .clickMe of course triggers fadeIn when I mouseenter on .Claus which is triggering on the person below too. (I have over 20 persons I need this to work on, but I thought making 2 for this case would be sufficient)

Any suggestions ?

Answer 1

Try this code:

$('img').not('.clickMe').mouseenter(function () {
            $(this).prev('.clickMe').fadeIn(500);       
});
 $('.clickMe').mouseleave(function(){
            $(this).fadeOut(500);
});