如何在jQuery懸停事件處理程序中使用$（this）？

Question

我在一個div中隱藏了一個無序列表。該div有一個'.feed-label'類，我現在正在顯示div在div被懸停時的情況。

我的問題是，當鼠標懸停的所有其他元素也顯示出，我只希望這是盤旋在展現一個。

我不知道如何使用$（本）。在事件處理程序的上下文

$('.feed-label').hover(function() { 
    $('.article-interactive-buttons').toggleClass('hide'); 
}); 

Answer 1

this關鍵字指懸停的元件，即.feed-label元件。你應該元素傳遞給jQuery構造函數創建一個jQuery對象，然後使用find/children方法爲選擇目標後裔。

$('.feed-label').hover(function() { 
    $(this).find('.article-interactive-buttons').toggleClass('hide'); 
}); 

您也可以使用$(selector, context)語法，會像上面的代碼片段：

$('.feed-label').hover(function() { 
    $('.article-interactive-buttons', this).toggleClass('hide'); 
}); 

Answer 2

你可以試試：

$('.feed-label').hover(function() { 
    $(this).closest('.article-interactive  buttons').toggleClass('hide'); 
} 

Answer 3

如果UL是div內，和你想去的CSS唯一的解決辦法，你可以這樣做：

.feed-label:hover .article-interactive-buttons { 
    display: none; 
} 

.feed-label:hover .article-interactive-buttons { 
    display: block; 
}