css - 过渡后无法将叠加层隐藏起来

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%
}

这应该可以解决您的问题。