Show absolutely pos. div on hover in list

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).

score 0 · Accepted Answer · answered Jan 08 '12 at 10:20

0

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

answered Jan 08 '12 at 10:20

Vitalii Petrychuk

14,035
8
51
55

Can you explain why this works and mine not? I should only use the last child of the html structure? Thanks by the way! – Mathijs Delva Jan 08 '12 at 10:27
`$("a.abhover", this)` here you work only with hovered `$(".tj_gallery li")`, and in your example you work with all `$(".tj_gallery li a.abhover")` together. – Vitalii Petrychuk Jan 08 '12 at 10:34
You are welcome. Read this http://stackoverflow.com/questions/306583/this-selector-and-children – Vitalii Petrychuk Jan 08 '12 at 10:37

Show absolutely pos. div on hover in list

1 Answers1