Question

我试图在youtube视频上设置div，然后当你将鼠标悬停在div上时div会消失，你可以在下面播放youtube视频，这是否只能通过css实现？

#box{
    background-color: #000000;
    width: 560px;
    height: 315px;
    margin-top: -315px;
    z-index: 1;
}  
#box:hover {
    display: none;
    visibility: hidden;
}
iframe {
    z-index: 0;
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/qqrvm2XDvpQ" frameborder="0"         allowfullscreen></iframe>
<div id="box"></div>

https://jsfiddle.net/g20knmbw/1/

Answer 1

包裹所有内容，然后使用position:absolute定位叠加div ...然后使用包装上的悬停来影响叠加效果。

.wrap {
  display: inline-block;
  position: relative;
}

iframe {
  display:block;
  }
#box {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrap:hover #box {
  display: none;
  visibility: hidden;
}

<div class="wrap">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/qqrvm2XDvpQ" frameborder="0" allowfullscreen></iframe>
  <div id="box"></div>
</div>

JSfiddle Demo

当您将鼠标悬停在YouTube视频上时，我可以隐藏div吗？

1 个答案: