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

Question

我在 div 中隐藏了一个无序列表。 div 有一个 class '.feed-label'，当 div 悬停时我正在显示 ul。

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

我不知道如何使用 $(this)。

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

Answer 1

this keyword in the context of the event handler refers to the hovered element, i.e. the .feed-label element. You should create a jQuery object by passing the element to jQuery constructor and then use the 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;
}

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

How do I use $(this) in a jQuery hover event handler?

javascript

jquery

this