如何创建空心Div？重叠透明空心Div下层按钮可点击实现方案咨询

当然可以实现！你遇到的问题是默认情况下，即便div背景透明，它的整个盒模型区域（包括内容区、边框）都会捕获鼠标事件，导致下层元素无法被点击。要实现“空心”的交互效果，我们可以通过CSS的pointer-events属性精准控制事件传递。

基础解决方案代码 #

.item1{ 
  height:10rem; 
  width:10rem; 
  position:absolute; 
  border:0.5rem solid red; 
  background-color:transparent; 
  /* 让上层div不捕获鼠标事件，允许下层元素穿透 */
  pointer-events: none;
}
.item2{ 
  height:10rem; 
  width:10rem; 
  position:absolute; 
  top:5rem; 
  left:2rem; 
  border:0.5rem solid blue; 
  background-color:transparent; 
}
/* 单独恢复上层div内按钮的点击能力 */
.item1 button {
  pointer-events: auto;
}

<div class="item2"> <button>button 2</button> </div>
<div class="item1"> <button>button 1</button> </div>

原理说明 #

• pointer-events: none 会让.item1完全不响应任何鼠标事件（点击、hover等），鼠标会直接“穿透”它作用到下层的.item2及其按钮上。
• 由于该属性会继承给子元素，所以我们需要给.item1里的按钮单独设置pointer-events: auto，恢复它的点击功能，确保上层按钮依然可以正常交互。

进阶：让边框也能响应交互 #

如果你希望上层div的红色边框也能触发hover或点击事件，我们可以用伪元素模拟边框，同时保持中间区域的穿透性：

.item1{ 
  height:10rem; 
  width:10rem; 
  position:absolute; 
  background-color:transparent; 
  pointer-events: none; /* 主元素保持穿透 */
}
/* 用伪元素创建可交互的边框 */
.item1::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  border:0.5rem solid red;
  pointer-events: auto; /* 伪元素接收鼠标事件 */
}
.item2{ 
  height:10rem; 
  width:10rem; 
  position:absolute; 
  top:5rem; 
  left:2rem; 
  border:0.5rem solid blue; 
  background-color:transparent; 
}
.item1 button {
  pointer-events: auto;
}

这样设置后，红色边框可以正常响应hover、点击等事件，而div中间区域依然允许下层的button2被点击，完美实现“空心”的视觉与交互特性。

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