视频元素从叠加元素中窃取事件

Question

我正在尝试在显示一些文本和按钮的视频元素上创建一个简单的叠加层。

但是，当我尝试在叠加层中的元素上添加诸如click或mouseenter之类的事件时，不会触发事件。我正在使用角度。

如果我在视频上使用pointer-events: none;，则会检测到事件，但这没有用，因为我们仍然需要能够单击视频以暂停等。

这是我的html代码段

<div class="overlay">
  <span (click)="test()" (mouseenter)="test()" (mouseleave)="test()">Click me</span>
</div>
<video></video>

还有我的CSS

.overlay {
  background-color: grey; 
  color: white;
  position: relative;
  height: 60px;
  top: 60px;
  margin-top: -60px;
}

Answer 1

只需将您的.overlay的{​​{1}}设置为> 0，就可以了：

z-index