HTML5 视频上方不可选择的文本

Question

我正在寻找一种使文本完全无法选择的方法。我有一组 HTML5 视频，上面有文字。当您将鼠标悬停在视频上时，它会播放视频。当我将文本放在视频上方时，如果用户将鼠标悬停在文本上，它会导致视频停止。

是否有任何可能的方法使文本几乎透明，以免导致视频停止播放？我尝试了以下方法：

-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:default;

但这些样式只是阻止用户选择文本。您可以查看example of the problem here。

我找不到任何解决这个特定问题的答案，所以我打开了一个新查询。谢谢！

Answer 1

只需将 pointer-events: none 添加到文本元素，在您的情况下添加到 .overlay :)

.overlay{
    pointer-events: none;
    text-transform: uppercase;
    font-size: 1.9em;
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 100%;
    z-index: 1;
    display: none;
    text-align: center;
    opacity: 0.8;
    text-shadow: 0px 1px 0px #000000;
}