Question

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

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

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

Answer 1

您可以在要点击的元素上使用pointer-events＆＃34;通过＆＃34;：

pointer-events: none;

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

示例：此处没有 pointer-events: none，您无法选择文字：

＆＃13;

#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;
}

＆＃13;

<div id="outer">
  Testing 1 2 3
  <div id="inner"></div>
</div>

＆＃13;

此处与 pointer-events: none，您可以：

＆＃13;

#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;
}

＆＃13;

<div id="outer">
  Testing 1 2 3
  <div id="inner"></div>
</div>

＆＃13;

Answer 2

您需要有关javascript的帮助

as I wrote here

按下鼠标时禁用pointer-events。

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

2 个答案: