如何让div从其他div上升？

Question

我知道如何通过为父母做position:absolute和为孩子做position:relative来在divs顶部上叠加div，但是我怎样才能让div从另一个div上升？我想要达到的一个例子是here。滚动到底部并将鼠标悬停在作品上。

Answer 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/

Answer 2

向jQuery和z-index介绍自己。

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

诀窍这里了slideDown会让你的顶格滑下。唯一出现在我脑海的是，而不是扩大底部股票，相反。获取顶部div，并使其滑动，而其他div显示在其后面。它应该给出底部div'滑动'的外观。

请注意，对不起，如果这不起作用。我其实不确定你是否可以让它滑到一半而不是所有的方式......但祝你好运！

Answer 3

你可以做什么是绝对的立场，即弹出一个相对定位的盒子，例如：

<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 4

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