带透视旋转效果的页面中，如何点击z-index为负的隐藏div元素？

嘿，我明白你遇到的困境了——想让隐藏的div保持在下层（z-index:-5），同时还要能点击里面的元素，但上层的旋转div总是挡住点击事件。下面给你几个实用的方案，都能满足你的需求：

方案1：用pointer-events: none实现点击穿透（首推） #

问题的关键是上层的.top和.bottom在旋转后依然占据着全屏的点击区域，把下层的.hidden给挡住了。我们可以在它们处于展开状态时，让它们不再拦截点击事件：

修改你的CSS，添加这几行：

/* 当top和bottom展开旋转时，允许点击穿透到下层 */
.slide-up, .slide-down {
  pointer-events: none;
}
/* 单独给按钮恢复点击能力，不然按钮也会被穿透无法点击 */
#split-me, #yum {
  pointer-events: auto;
}

这样一来，当你点击按钮展开两个div后，它们只会显示旋转效果，但点击会直接落到下面的.hidden元素上，而按钮本身依然可以正常点击触发收起动作，完美符合你的需求。

方案2：事件委托捕获点击 #

如果不想修改CSS的pointer属性，也可以通过事件委托的方式来监听.hidden内元素的点击。把事件绑定到更高层级的元素（比如document）上，判断点击目标是否属于.hidden内部：

更新你的JavaScript代码：

// 监听document上的点击事件，目标是hidden里的元素
$(document).on('click', '.hidden *', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到上层元素
  // 这里写你需要执行的逻辑，比如：
  console.log('点击了hidden里的元素！');
});

这种方法不需要改动样式，但要注意准确指定目标选择器，避免误触发其他元素的事件。

额外检查：确保容器层级不干扰 #

你可以顺便确认下.wrapper的z-index设置，避免它的层级影响到.hidden：

.wrapper {
  position: relative;
  z-index: 0; /* 显式设置为0，避免默认层级带来的意外干扰 */
}

总的来说，方案1是最简洁高效的，既能保持.hidden的z-index为-5，又能完美解决点击问题，推荐你优先尝试这个方案。

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