在不影响悬停的情况下将文本放在 div 上答案

【问题标题】：put text on div with out affecting hover在不影响悬停的情况下将文本放在 div 上
【发布时间】：2018-02-08 07:33:40
【问题描述】：

我刚刚尝试在我的视频上添加文字。视频悬停时自动启动。上面的文本悬停是“禁用”的。是否有任何选项可以在不影响悬停的情况下显示文本？文字是绝对的。

我使用 js 启动视频。文本位于顶部的 div 中。

    window.onload = function() { //executes this code after the DOM loads
   //--- this is the selector element. Feel free to change this if you don't want all video objects targeted.
  const vids = document.getElementsByTagName(`video`)

   //--- Now we loop over all of the selected elements and add event listeners
  for (let i = 0; i < vids.length; i++) {
    vids[i].addEventListener( `mouseover`, function(e) { 
      vids[i].play()
    })
    vids[i].addEventListener( `mouseout`, function(e) {
      vids[i].pause()
    })
  }
}

Image from Webinspector

【问题讨论】：

欢迎来到 StackOverflow！为了让我们更好地帮助您，您能否更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。有关更多信息，请参阅有关how to ask good questions 的帮助文章，并使用tour of the site :) 您可能需要修改您的onhover 功能以包括文本的悬停，但我们不知道没有看到你的代码。

标签： html css video text hover

【解决方案1】：

所以你可以将以下两个css属性添加到文本对象中，这样用户就无法与它们进行交互了。

.text-class {
    user-select: none;
    pointer-events: none; 
}

如果您仍然希望用户能够选择文本，请说明复制和粘贴文本是否重要，您可以这样做。

.text-class {
    pointer-events: none; 
}

【讨论】：