在绝对元素后面的元素上的文本选择 [英] text selection on a element behind an absolute element

问题描述

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

I have an overlay element that hides other div's that contains text. the overlay element is absolute positioned. I want the user to be able to select a text on those div's behind. My solution was to hide the overlay (display: none) on user event mouseDown and show it again when the mouseUp event occurred.

以这种方式，只要覆盖层被隐藏，用户就可以选择文本(只要还没有mouseUp即可).

that way as soon as the overlay is hidden the user can select the text (as long as the mouseUp hasn't occurred yet).

此解决方案似乎适用于chrome和safari，但不适用于Firefox，有什么建议吗?

This solution seems to work on chrome and safari but not on firefox, any advice?

推荐答案

您可以使用指针事件 在要单击通过"的元素上:

You could use pointer-events on the element you want to click "through":

pointer-events: none;

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

It may need prefix in some browsers.

示例:此处没有 指针事件:无，您无法选择文本:

Examples: Here without pointer-events: none, you can't select the text:

#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:无，您可以:

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

这篇关于在绝对元素后面的元素上的文本选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！