我正在尝试用DIV覆盖视频,因此不可见。然后,当您悬停在Div上时,Heigth会缩小以使视频控制可见。
我不知道为什么我会得到这个怪异的故障:https://i.gyazo.com/AFF58E50903009F7515A9CBD9B045F91.MP4
这是带有视频和覆盖的切片:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
样式在这里:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
整个东西都加载了NG-View。
但是,无论如何,这是所有源代码,我在GitHub上托管它:https://github.com/vacanor/gifsound
我很想指出为什么会发生这种情况。
pd:我不知道它是否有任何效果,但我使用flexbox
尝试将这些divs用另一个div包装,就像以下 -
一样<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
制作样式 -
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}