试图让一个div从悬停的另一个div后面滑下

Question

我试图让一个div与一些文本一起滑动到另一个div上，并在悬停时显示更多文本。我目前很难实现这一点。如果一个好的解决方案包含JQuery，你们可以ELI5（我以前从未使用过JQuery）吗？下面列出的当前尝试有我正在寻找的基础。我只想在那里有一个悬停的动画，显示额外的文字向下滑动，而不是突然出现。

.container { 
 
    font-size: 2em; 
 
    box-shadow: 0px 0px 3px 1px black; 
 
    margin: 20px; 
 
    padding: 20px; 
 
    background-color: #E7E7EF; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 10px; 
 
    width: 80%; 
 
    margin-top: 50px; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
} 
 
.below { 
 
    display: none; 
 
    -webkit-transition-duration: 0.5s; 
 
    transition-duration: 0.5s; 
 
} 
 
.container:hover .below { 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="above"> 
 
    <p> 
 
     Some text in the above div 
 
    </p> 
 
    </div> 
 
    <div class="below"> 
 
    <p> 
 
     More text that slides down from under the above div 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

使用overflow代替display https://jsfiddle.net/yb6vct8a/1/

.container { 
    font-size: 2em; 
    box-shadow: 0px 0px 3px 1px black; 
    margin: 20px; 
    padding: 20px; 
    background-color: #E7E7EF; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 10px; 
    width: 80%; 
    margin-top: 50px; 
    -webkit-transition: max-height 0.8s; 
    -moz-transition: max-height 0.8s; 
    transition: max-height 0.8s; 


} 

.below { 
    max-height: 0; 
    overflow: hidden; 

    /* Set our transitions up. */ 
    -webkit-transition: max-height 0.8s; 
    -moz-transition: max-height 0.8s; 
    transition: max-height 0.8s; 
} 

.container:hover .below { 

    max-height: 200px; 


}