jquery fadein div on hover within wordpress loop

Question

I've been playing around with a few different ways of doing this and i'm not 100% sure any of them will work once put into the loop.

I've tried a few different types of jquery hover effects but is there a way to only select the .displayDiv that is a child of the li i'm hovering?

I put where i'm at here: http://jsfiddle.net/XkaLh/

$('li').hover(
    function()
{
    $('.hoverDisplay').animate({ 'opacity': 1 });
},
function()
{
    $('.hoverDisplay').animate({ 'opacity': 0 });
}); 

Thanks in advance for help

Answer 1

You need to limit the lookup hoverDisplay element within the hovered li element

$('li').hover(function () {
    $(this).find('.hoverDisplay').animate({
        'opacity': 1
    });
}, function () {
    $(this).find('.hoverDisplay').animate({
        'opacity': 0
    });
});

Demo: Fiddle