Question

我知道如何通过对父级position:absolute和子级position:relative进行div来叠加div，但是如何让div从另一个div“升起”？我想要实现的一个例子是here。滚动到底部，将鼠标悬停在图稿上。

Answer 1

您可以做的是在相对定位的框中弹出的绝对位置，例如：

<div class="featured-image">
  <div class="caption">
    <p>This is where your text goes</p>
  </div>
</div>

现在您已经拥有了这个，除非滚动，否则您需要使标题不可见。因此，使用CSS执行此操作的简单方法是：

.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }

当您将鼠标悬停在图像上时，最后一行会显示它。

然后你可以轻松地使用jQuery为它设置动画。这似乎是他们正在使用的。

$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
    $(".caption", this).stop(true, true).show(500)
};
var hide = function() {
    $(".caption", this).stop(true, true).hide(500);
};  
    $(".featured-image").hover(show, hide);

Answer 2

HTML

<div id="pic">
    <div>

    </div>
</div>

CSS

#pic {
    position: relative;
    background: yellow;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

#pic div {
    position: absolute;
    bottom: -50px;
    background: black;
    height: 50px;
    width: 100px;

}

JQuery的

$('#pic').hover(
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '+=50'
        }, 100);
    },
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '-=50'
        }, 100);
    }
);

jsfiddle：http://jsfiddle.net/Z6eLa/2/

Answer 3

自我介绍jQuery和z-index。

http://api.jquery.com/slideDown/

这里的技巧是滑动将使你的顶部div向下滑动。我想到的唯一一件事就是不要扩大底层，而是反过来。获取顶部div，然后向上滑动，而另一个div显示在它后面。它应该给出底部div'滑动'的外观。

注意，对不起，如果这不起作用。我实际上不确定你是否可以让它只在中途滑动而不是一直滑动......但是好运！

Answer 4

你不需要JS，只需使用css3过渡。

如何让div从其他div上升？

4 个答案: