text selection on a element behind an absolute element

问题

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.

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

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

回答1:

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>

Here with pointer-events: none, you can:

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

回答2:

You need help with javascript

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

Disable pointer-events when mouse is down.

来源：https://stackoverflow.com/questions/36674135/text-selection-on-a-element-behind-an-absolute-element

标签

javascript

css

firefox