jquery - 仅显示/隐藏一个带有DIV的DIV

我有一张要在鼠标悬停时显示/隐藏标签的图像页面。图像也是链接，并且div称为“ .smallproj”。 JQuery脚本效果很好，但是当我将鼠标悬停在.smallproj a的任何一个实例上时，当然会显示.smallproj p的所有实例。我知道我需要更改脚本，以便仅将.smallproj实例悬停在节目上，但是在这种情况下，执行此操作的最佳方法是什么？

jQuery脚本：

$(".smallproj a").on({
    mouseover: function() {
        $(".smallproj p").show();
    },
    mouseout: function() {
        $(".smallproj p").hide();
    }
});

最佳答案

您将要使用this关键字，该关键字引用事件所针对的元素，然后从该元素（将a元素悬停在该元素上）遍历到您要显示的p元素。一般情况下，不假设它们彼此之间的相对位置，只是假设它们都位于.smallproj类的某个内部，就将是这样的：

$(".smallproj a").on({
    mouseover: function() {
        $(this).closest(".smallproj").find("p").show();
    },
    mouseout: function() {
        $(this).closest(".smallproj").find("p").hide();
    }
});