Question

我只是尝试将文字放在我的视频上。视频在悬停时自动启动。使用文本，悬停被“禁用”。有没有选项显示文本而不影响悬停？文字是绝对的。

我使用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

Answer 1

因此，您可以将以下两个css属性添加到文本对象中，以便用户无法与它们进行交互。

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

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

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

将文本放在div上而不影响悬停

1 个答案: