jQuery - 在悬停时显示重复 div 的一个实例

Question

我正在尝试获得与该网站类似的功能； http://theadeleexperience.com/将鼠标悬停在缩略图上，它会显示帖子的日期。我已准备好所有 PHP 和 HTML 代码，但我需要一些有关 jQuery 代码的帮助才能使其正常工作。

下面的代码将(显然)在悬停时显示 .test div 的每个实例(具有讽刺意味的是，除了我悬停的那个)；但是我只希望它显示我正在悬停的 .test div - 而不是它的其他 3 个实例。

除了下面的代码，甚至不使用 jQuery 的情况下，可能还有更简单的方法来实现它。

$(document).ready(function() {
$(".test").hide();
    $(".thumbnail").mouseenter(function() {
        $(".test").show();
    $(".thumbnail").mouseleave(function() {
    $(".test").hide();
    });
        });
});

Answer 1

Here是我想出的解决方案。

您提供的代码的主要问题是您没有在 mouseenter 函数之后关闭括号。仅获取您悬停的那个的关键是使用 this。您可以为 this 提供参数，如下所示。 .overlay 是目标，但您使用 this 来确保它只是被悬停的那个。最终代码应该是这样的

$(".overlay").hide();
$("article").on("hover", function () {
  $(".overlay", this).slideToggle();
});