使用jQuery更改相对于P标记的上边距

我想有几个div，里面有p标签，但不可见。然后，每当您将鼠标悬停在div上时，p tags margin top值将变为其高度的负值。例如：

第一个p的高度为60px，其边距上限值为0。 您将鼠标悬停在其包含的div上。 第一个p的边距上限值变为其高度的负值，即60像素，导致p向上移动

第二个p的高度为40px，其边距上限值为0。 您将鼠标悬停在其包含的div上。 第二个p的边距上限值变为其高度的负值，即40px，导致其向上移动

以下是我计划使用的代码：

$(document).ready(function() {
    $("div.works div").hover(function() {
        $(this).find("p").stop().animate({
            marginTop: -$("p").outerHeight()
        }, 250);
    } , function() {
        $(this).find("p").stop().animate({
            marginTop: "0"
        }, 250);
    });
});

我已经在这里设置了一些非常接近的设置：

我唯一的问题是，所有的p都向上移动了相同的量，而不是相对于它们自己的高度。似乎它们都会上升到第一个p的高度

---

如何解决此问题？

您可以使用

$（选择器，上下文）

而不是选择所有

p

标记

---

您可以使用

位置：相对
位置：绝对
结构并设置
底部属性的动画：

$(document).ready(function() {
    $("div.works div").hover(function() {
        var $p = $('p', this);
        $p.stop().animate({
            marginTop: - $p.outerHeight()
        }, 250);
    } , function() {
        $('p', this).stop().animate({
            marginTop: "0"
        }, 250);
    });
});