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

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

本文关键字：this 程序 jQuery 悬停 事件处理      更新时间：2023-09-26

我在div中隐藏了一个无序列表。div 有一个类".feed-label"，当div 悬停在上面时，我目前正在显示 ul。

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

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

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

处理程序上下文中的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');
});

如果 ul 在div 中，并且您想采用仅使用 css 的解决方案，您可以这样做：

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

你可以试试：

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