[英]Trying to have one div slide down from behind another div on hover
我正在嘗試將一個帶有一些文本的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>
使用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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.