Question

我希望在其中有几个带有p标签的div，但不可见。然后，只要将鼠标悬停在div上，p标签margin-top值就会变为其高度的负值。例如：

第一个p的高度是60px，它的margin-top值是0。你将鼠标悬停在其包含的div上。第一个p的margin-top值变为其高度的负值，即60px，导致p向上移动。

第二个p的高度是40px，它的margin-top值是0。你将鼠标悬停在其包含的div上。第二个p的margin-top值变为其高度的负值，即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);
    });
});

我已经有了非常接近这里设置的内容：http://jsfiddle.net/yryRZ/1/

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

我该怎么做才能解决这个问题？

Answer 1

您可以使用p。

，而不是选择所有$(selector, context)标记

$(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);
    });
});

http://jsfiddle.net/QCect/

Answer 2

您可以使用position: relative＆gt; position: absolute bottom {{1}}属性的{{1}}结构和动画。http://jsfiddle.net/yryRZ/3/

使用jQuery更改相对于P标记的最高保证金

2 个答案: