我在另一个div(#video-wrapper)中有两个div.
HTML：
<div class="row">
<div class="video-wrapper col-lg-2">
<div class="video-thumbnail">
<img src="img/img.jpg">
<span class="glyphicon glyphicon-play video-play"></span>
<span class="glyphicon glyphicon-info-sign video-info"></span>
</div>
<div class="video-description">
<p class="title">See and Sea...</p>
<div class="video-upload-info">
<p class="by">Franschisil</p>
<p class="pubdate">4 days ago</p>
</div>
</div>
</div>
</div>
CSS：
.video-wrapper {
}
.video-thumbnail {
position: relative;
height: 110px;
Box-shadow: 0px 0px 10px 0px;
}
.video-description {
height: 100px;
background-color: white;
padding: 5px;
word-wrap: break-word;
opacity: 0.9;
}
现在它看起来像这样：
我想要实现的是隐藏#video-description,并在点击.video-info时将其显示在#video-thumbnail上方.我该如何实现这一目标？非常感谢您的帮助和指导.谢谢.
更新
这是我在点击信息之前想要的样子：
当点击它是这样的：
**更新**
当应用position：absolute时,如果字母数较少,.video-description width的大小会缩小：
解决方法
CSS中你需要这样的东西：
.video-wrapper{
position: relative;
Box-shadow: 0px 0px 10px 0px;
overflow: hidden;
}
.video-description {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
}
.video-info{
position: relative;
z-index: 1;
}
jQuery的：
$('.video-info').click(function(){
$('.video-description').fadetoggle();
});
DEMO