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

Question

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

一旦覆盖被隐藏,用户就可以选择文本(只要还没有发生mouseUp).

这个解决方案似乎适用于chrome和safari但不适用于firefox,任何建议？

Answer 1

您可以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>