我在另一个 div 中有两个 div (#video-wrapper
)。
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
被点击。我如何实现这一目标?非常感谢您的帮助和指导。谢谢。
更新
这就是我希望它在我点击信息之前看起来的样子:
当它被点击时是这样的:
**更新**
当应用 position:absolute
时,如果字母较少,.video-description
宽度会缩小:
最佳答案
您可以通过一些简单的 jQuery 来实现这一目标.
我为您创建了两个示例:
DEMO 1
DEMO 2
我在哪里使用以下 jQuery:
// DEMO 1
$(document).ready(function() {
$('.info').click(function() {
$('.video-description').slideToggle();
});
});
// DEMO 2
$(document).ready(function() {
var clicked = false;
$('.info').click(function() {
$('.overlay').slideToggle();
if (!clicked) {
$('.info').animate({top: "115px"}, 500);
clicked = true;
} else {
$('.info').animate({top: "0px"}, 500);
clicked = false;
}
});
});
在这两个演示中,您将找到所有必要的 HTML、CSS 和 jQuery。如果仔细研究代码,您应该能够自己复制效果。别忘了 include jQuery in your document.
关于jquery - 将一个 div 放在另一个 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31369332/