0

position:absolute我知道如何通过为父母和孩子做事来将 div 堆叠在 div 之上position:relative，但我怎样才能让一个 div 从另一个 div “上升”？我想要实现的一个例子是here。滚动到底部并将鼠标悬停在艺术品上。

4

4 回答 4

2

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

<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);
于 2013-02-28T04:20:15.133 回答
1

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/

于 2013-02-28T04:28:54.557 回答
0

向自己介绍 jQuery 和 z-index。

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

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

请注意，如果这不起作用，对不起。我实际上不确定你是否可以让它只滑到一半而不是一路……祝你好运！

于 2013-02-28T04:16:58.473 回答
0

你不需要 JS，只需使用 css3 转换。

于 2013-02-28T14:10:09.470 回答