HTML/CSS:使文本覆盖，但保持视频对鼠标事件的响应(Elementor)

Question

我们对整个网页编码有点陌生，目前正在通过wordpress/elementor使用自定义html/css建立我们自己的wordpress页面(但仍然是免费版本，而不是专业版(。

我们制作了一个视频自动播放，并对悬停鼠标事件和鼠标点击做出反应，但当我们试图用.overlay类在视频框上放置文本覆盖时，覆盖类会覆盖整个视频，而实际视频不会对我们的鼠标做出反应。目标是在视频上显示文本，同时视频本身保持播放并在悬停时暂停。

我们使用的是Elementor插件的HTML功能。

如有任何帮助/建议，我们将不胜感激。

以下是我们到目前为止得到的(是的，当涉及到编码时，我们是新手，我想很抱歉代码混乱(：

<style>
.Maus {
cursor: pointer;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Times New Roman;
font-size: 22pt;
line-height: 22pt;
text-align: center;
}
</style>
<div class=Maus>
<div onmousedown="openInNewTab('https://private.com/video/');">
<video loop="this.play()" onmouseover="this.play()" onmouseout="this.pause();">

<source src="https://private.com/video.mp4" type="video/mp4">
</video>

<div class=overlay>
<p>
lorem ipsum
</p>

</div>

</div>
</div>
<script>
function openInNewTab(url) 
{
window.open(url, '_blank').focus();
}
</script>

这是它的屏幕截图：

elementor小部件中的视频文件，带有文本

试图篡改z索引，但失败了，因为元素与文本重叠，所以它在视频后面。

Answer 1

您可以添加pointer-events: none;来制作一个让鼠标动作的元素"经历它"；(对其背后的元素(

Answer 2

使用我认为会对您有所帮助的属性：

pointer-events: none;