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添加到text元素，在你的情况下添加到.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;
}

HTML5视频上方的不可选文字

1 个答案: