且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-08-24 17:10:58

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

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>