jquery on hover на каждый div

Question

Fiddle: http://jsfiddle.net/3VB4b/ Когда я наводил указатель на .loop, я хочу, чтобы span.soc в этом div исчезал. Сейчас все они исчезают.

Я попытался использовать селектор .each() и безрезультатно.

<div class="loop"> 
    Content 
    <span class="soc"> span</span> 
</div> 

<div class="loop"> 
    Content 
    <span class="soc"> span</span> 
</div> 

<div class="loop"> 
    Content 
    <span class="soc"> span</span> 
</div> 

Jquery

$(".loop").hover(function() { 
    $('span.soc').fadeTo("slow",100); 
}); 

Answer 1

Вам нужно добавить «это» в контексте Вашего поиска, чтобы найти только дочерние элементы.

$(".loop").hover(function() { 
    $(this).find('span.soc').fadeTo("slow",100); 
}); 

Answer 2

Вам необходимо ограничить селектор дочерними элементами элемента, на котором нависает. Это имеющийся в this в обратный вызов, так попробуйте следующее

$(".loop").hover(function() { 
    $('span.soc', this).fadeTo("slow",100); 
}); 

Answer 3

здесь вы идете (я также добавил возвращаясь обратно в исходное состояние): http://jsfiddle.net/3VB4b/2/

код:

$(".loop").hover(function() { 
    $(this).find('span.soc').fadeTo("slow",100); 
}, function(){ 
    $(this).find('span.soc').fadeTo("slow",0.4); 
});