選擇只徘徊元素，而不是所有匹配的元素

Question

我的HTML的形式爲：

<ul> 
    <li class="tile"> 
     <span class="hidden"></span> 
     <span class="hidden"></span> 
    </li> 
    <li class="tile"> 
     <span class="hidden"></span> 
     <span class="hidden"></span> 
    </li> 
</ul> 

當與tile類的li上徘徊，我需要第一span與hidden類有一個類中刪除。當鼠標移開時，需要再次隱藏該跨度。到目前爲止，我有這樣的：

$(".tile").hover(function() { 
    $(this + ":first-child").removeClass("hidden"); 
}, function() { 
    $(this + ":first-child").addClass("hidden"); 
}); 

然而，這使得所有的li與tile類做的動作，而不僅僅是一個在徘徊。第二個函數將hidden類提供給標題中的樣式表引用！

我在做什麼錯？我以爲我正確使用了this。

Answer 1

不要試圖連接this與其他選擇器，因爲它不會做你認爲它的工作。

使用.find()代替：

$(".tile").hover(function() { 
    $(this).find(":first-child").removeClass("hidden"); 
}, function() { 
    $(this).find(":first-child").addClass("hidden"); 
}); 

Answer 2

你懸停功能應該是：

$(".tile").hover(function() { 
    $(this).find("span").first().removeClass("hidden"); 
}, function() { 
    $(this).find("span").first().addClass("hidden"); 
});