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

Question

我在div中隐藏了一个无序列表。 div有一个类'.feed-label＆＃39;当div被徘徊时，我现在正在显示ul。

我的问题是，当盘旋时，所有其他元素也会显示，我只想要悬停在其中的那个元素来显示。

我不知道如何使用$（this）。

$('.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

如果ul在div中，并且你想要一个仅限css的解决方案，你可以这样做：

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

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

Answer 3

您可以尝试：

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