如何创建一个空心的div？ [复制]

Question

我有 2 个重叠的透明 div，它们有自己的按钮和其他类似的功能：

.item1{
  height:10rem;
  width:10rem;
  position:absolute;
  border:0.5rem solid red;
  background-color:transparent;
}

.item2{
  height:10rem;
  width:10rem;
  position:absolute;
  top:5rem;
  left:2rem;
  border:0.5rem solid blue;
  background-color:transparent;
}

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

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

但我希望 div 表现空心，以便在上面的示例中我也可以按 button2
这样的事情可能吗？

注意：
我不是在寻找解决方法 div
例如。请不要建议我改用 SVG 矩形

Answer 1

仅在按钮上保留指针事件

.item1{
  height:10rem;
  width:10rem;
  position:absolute;
  border:0.5rem solid red;
  background-color:transparent;
}

.item2{
  height:10rem;
  width:10rem;
  position:absolute;
  top:5rem;
  left:2rem;
  border:0.5rem solid blue;
  background-color:transparent;
}

div[class] {
  pointer-events: none;
}
button {
  pointer-events: initial;
}

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

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