求助：使用html5-device-mockups库时screen区域内按钮无法点击

我之前也踩过这个坑！这个mockup库为了模拟设备屏幕的反光质感，会在设备容器上自动生成一个伪元素（通常是::before），这个层默认会拦截所有鼠标点击事件，直接导致你放在screen里的按钮没法响应交互。

解决起来很简单，核心是让这个反光层不干扰下层内容的点击：

• 全局修改方案：找到设备容器对应的CSS类（比如默认的.device或者具体设备类如.iphone-14），给它的伪元素添加pointer-events: none属性，让点击事件直接穿透到下层：

.device::before {
  pointer-events: none;
}

• 局部自定义方案：如果不想影响所有设备的效果，可以给需要启用屏幕交互的设备容器加个自定义类，比如enable-screen-interaction，然后写针对性的CSS：

.device.enable-screen-interaction::before {
  pointer-events: none;
}

接着把这个类加到你的设备容器上：

<div class="device enable-screen-interaction">
  <div class="screen">
    <!-- 这里放你的可交互内容 -->
    <button>点击试试</button>
  </div>
</div>

你之前调z-index没用是因为这个伪元素本来就在screen的视觉上层，强行改z-index还可能破坏mockup的视觉层级。用pointer-events: none是最优雅的方式——既保留了反光的视觉效果，又不影响下层内容的交互。

验证方法也很简单：用浏览器开发者工具的元素选择器，鼠标悬停在按钮上时，检查选中的元素是不是按钮本身。修改前大概率选中的是设备的伪元素，修改后就能正确选中按钮了。

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