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?

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?

• javascript
• css
• firefox

2 Answers 2

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>

You need help with javascript

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

Disable pointer-events when mouse is down.