試圖讓一個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; 


}