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;

但是這些樣式只會阻止用戶選擇文本。 您可以在此處查看問題的示例 。

我找不到解決此特定問題的任何答案，因此我打開了一個新查詢。 謝謝！

Answer 1

只需添加指針事件：不添加到文本元素，在您的情況下添加到.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;
}