视频上方加绝对定位文字后hover失效，如何不影响视频自动播放触发？

这问题我碰到过好多次啦！核心原因就是你那个绝对定位的文字div挡在视频上面，鼠标hover的时候其实是触发在div上，根本没碰着视频，所以原来的hover逻辑就失效了。给你两个靠谱的解决方案，按需选：

方案1：CSS穿透鼠标事件（最简便） #

如果你的文字层不需要任何鼠标交互（比如点击、选中），直接给文字div加pointer-events: none属性就行。这个CSS属性会让元素完全忽略鼠标事件，所有鼠标操作都会穿透到下面的视频元素上，既不影响文字显示，又能让视频正常响应hover。

示例代码：

.video-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  /* 你的其他文字样式：颜色、字体、定位等 */
  pointer-events: none; /* 关键属性 */
}

这个方法兼容性拉满，现代浏览器甚至IE11都支持，是最推荐的方案。

方案2：JS手动转发hover事件（适合文字需要交互的场景） #

如果你的文字层需要支持鼠标操作（比如点击跳转、文字选中），那pointer-events: none就不适用了。这时候可以把hover事件绑定到文字div上，然后手动触发视频的播放/暂停逻辑：

示例代码：

// 获取元素
const textOverlay = document.querySelector('.video-text-overlay');
const targetVideo = document.querySelector('video');

// 转发mouseenter事件到视频
textOverlay.addEventListener('mouseenter', () => {
  targetVideo.play();
});

// 转发mouseleave事件到视频
textOverlay.addEventListener('mouseleave', () => {
  targetVideo.pause();
});

这样不管鼠标hover在文字还是视频上，都能触发视频的播放逻辑，同时文字层的交互也不受影响。

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