Elementor免费版：视频文本叠加后保留鼠标交互功能求助

关键修复：给叠加层添加pointer-events: none #

这是最直接的解决方案——让.overlay元素不捕获任何鼠标事件，鼠标操作会直接穿透到下方的视频上，同时叠加层的文本依然正常显示。

修改你的.overlay CSS：

.overlay {
  /* 保留你原有的定位、样式代码，比如：
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  padding: 20px;
  */
  pointer-events: none; /* 新增这一行 */
}

为什么z-index没起作用？ #

如果视频和叠加层是同级定位元素，哪怕把视频的z-index调得更高，全屏的叠加层依然会在视觉上覆盖视频，并且拦截鼠标事件。而pointer-events: none是从事件处理层面让叠加层“透明”，完全不干扰下层元素的交互，比调整z-index更适配这个场景。

特殊情况处理 #

如果你的叠加层里有需要点击的元素（比如跳转按钮），不要给整个.overlay加pointer-events: none，可以：

• 只给叠加层里的纯文本元素添加pointer-events: none
• 给需要交互的子元素单独设置pointer-events: auto，恢复它的鼠标事件响应

内容的提问来源于stack exchange，提问作者DeanC