绝对元素后面的元素上的文本选择

text selection on a element behind an absolute element

本文关键字：元素 文本 选择      更新时间：2023-09-26

我有一个覆盖元素，它隐藏了其他包含文本的div。覆盖元素是绝对定位的。我希望用户能够在这些div后面选择一个文本。我的解决方案是在用户事件mouseDown上隐藏覆盖（display:none），并在mouseUp事件发生时再次显示。

这样，一旦覆盖被隐藏，用户就可以选择文本（只要mouseUp还没有发生）。

这个解决方案似乎适用于chrome和safari，但不适用于firefox，有什么建议吗？

您可以在要单击"through"的元素上使用pointer-events：

pointer-events: none;

在某些浏览器中，它可能需要前缀。

示例：此处如果没有pointer-events: none，则无法选择文本：

#outer {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid black;
  position: relative;
}
#inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-color: yellow;
}
<div id="outer">
  Testing 1 2 3
  <div id="inner"></div>
</div>

这里使用pointer-events: none，您可以：

#outer {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid black;
  position: relative;
}
#inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-color: yellow;
  pointer-events: none;
}
<div id="outer">
  Testing 1 2 3
  <div id="inner"></div>
</div>

您需要javascript 的帮助

https://codesandbox.io/s/jovial-hodgkin-jqrsp

鼠标按下时禁用pointer-events。

相关文章：