JQuery при наведении на каждый div

Question

Скрипка: 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

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

$(".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);
});