javascript - 如何使 div 从其他 div 上升？

Question

我知道如何通过为父级执行 position:absolute 和为子级执行 position:relative 来将 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);