Question

A few hitches in a bit of my code. I’ve got several HTML5 audio players on a page, each of which is played by clicking on an image that fades in when you enter its container. To accomodate the use of the same play image on all the players, I made it a class.

My issue is that when you fade into any of the .thumbnail containers the image fades in. I need to somehow hone it in to whichever container you entered.. maybe with (this) or something.

HTML:

        <div class="thumbnail" id="paparazzi">
            <a class="playback">
                <img class="play" src="http://www.lucisz.com/imgs/play.png" />
            </a>
            <audio>
                <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
                <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
                Your browser does not support HTML5 audio.
            </audio>
        </div>

JavaScript:

$('.play').hide();
$('.thumbnail').hover(function(){
    $('.play').fadeToggle(400);
});

Conceptual JavaScript:

$('.play').hide();
$('this, .thumbnail').hover(function(){
    $('.play').fadeToggle(400);
});

Answer 1

Should be this:

$('.thumbnail').hover(function(e){
    $('.play', this).fadeToggle(400);
});

So you were nearly right.

For an example:
http://jsfiddle.net/4NYqv/4/

Edit: Sorry, had it the wrong way around.