设置pointer-events:none与position:absolute后无法选中文本怎么办？

这问题我之前也碰到过，核心原因是pointer-events: none的继承特性在搞鬼～

当你给父元素.block设置pointer-events: none时，这个属性会被子元素继承——哪怕子元素用position: absolute脱离了文档流，它依然会遵循父元素的“不响应任何鼠标交互”规则，所以你没法选中文本。

解决方案 #

只需要给绝对定位的子元素p单独设置pointer-events: auto，强制让它恢复响应鼠标交互的能力，这样既保留了定位效果，又能正常选中文本。

修改后的CSS代码

.block{ 
  position:relative; 
  height:20px; 
  background:red; 
  color:#fff; 
  margin-bottom:20px; 
  pointer-events:none; 
} 
p{ 
  position:absolute; 
  top:0; 
  left:0; 
  margin:0;
  pointer-events: auto; /* 新增这一行，覆盖父元素的继承规则 */
}

HTML代码（无需修改）

<div class="block">hovered</div>
<div class="block"><p>can be hovered and selected now</p></div>

这样设置后，子元素的文本就能正常被选中，同时父元素依然保持pointer-events: none的状态，不会响应鼠标事件，完全符合你的需求～

内容的提问来源于stack exchange，提问作者Volodymyr