[英]Trying to have one div slide down from behind another div on hover
I'm trying to have a div with some text that slides down another div with more text when hovered over. 我正在尝试将一个带有一些文本的div悬停在另一个div上并带有更多文本的文本上。 I'm currently having difficulty achieving this.
我目前很难实现这一目标。 If a good solution includes JQuery, could you guys ELI5 (I've never used JQuery before)?
如果一个好的解决方案包括JQuery,那么你们可以使用ELI5(我以前从未使用过JQuery)吗? The current attempt laid out below has the basis of what I'm looking for.
下面列出的当前尝试是我要寻找的基础。 I just want there to be an animation on hover showing the additional text sliding down, instead of it suddenly appearing.
我只希望悬停时有一个动画,显示其他文本向下滑动,而不是突然出现。
.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>
Use overflow
instead of display
https://jsfiddle.net/yb6vct8a/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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.