Question

I have a simple question yet it’s not working out. See this html:

<div id="viewer">
    <ul class="tj_gallery">
        <li><a href="#"><img src="images/projecten/main/chicane.png" alt="" width="280" height="178" /></a><a href="#" class="abhover">01</a></li>
    </ul>
</div>

The a.abhover is absolutely positioned inside the relative li. The a.abhover has display:none; in CSS. If I hover one li (it’s a long list!) the a.abhover should fadeIn @ 1000ms. Right now this is working, but only for every single one of those li’s. See my jQuery code:

$(".tj_gallery li").hover(function(){
    $(".tj_gallery li a.abhover").stop(true,true).fadeIn("fast");   
}, function(){
    $(".tj_gallery li a.abhover").stop(true,true).fadeOut("fast");
});

Adding $(this, ".tj_gallery li a.abhover") or $(".tj_gallery li a.abhover", this) doesn’t help (it breaks it).

Answer 1

$(".tj_gallery li").hover(function(){
    $("a.abhover", this).stop(true,true).fadeIn("fast");
}, function(){
    $("a.abhover", this).stop(true,true).fadeOut("fast");
});