Question

我最终会在网格上有一个嵌入式YouTube视频网格，每个视频最初都会被一个叠加层覆盖，其中包含有关相关视频的信息。将鼠标悬停在叠加层上时，它会滑开，让视频可见。

问题是，一旦叠加层不在视线范围内，悬停不再有效，因此如果您甚至将鼠标拖过视频，则叠加层会返回。我一定会错过一些愚蠢的东西，但我不能为我的生活找出它是什么。

这是CSS

.vid-wrap {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}
.vid-wrap iframe, .vid-wrap .vid-overlay {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.vid-wrap .vid-overlay {
  z-index: 1;
  background-color: green;
}
.vid-wrap .vid-overlay:hover {
  top: -100%;
  transition: all .5s;
}

Answer 1

您只需添加此CSS即可解决问题

.vid-wrap:hover .vid-overlay{
    top: -100%
}

这可以解决您的问题。

一旦转变，就无法将覆盖层保持在视线之外

1 个答案: