CSS实现电子书式作品集：内页无法翻转动画问题排查

核心问题定位 #

你推测的封面checkbox遮挡内页checkbox是准确的——封面元素（包括你添加的inner_cover）层级高于内页，导致点击事件被封面拦截，无法触达内页交互控件。调试终端能触发是因为直接操作了内页checkbox，绕开了封面的遮挡。

具体解决方案 #

1. 动态调整封面元素层级 #

给封面相关元素设置条件化z-index，当封面展开后，将其层级降至内页以下，避免遮挡：

/* 假设封面checkbox的id为cover-toggle，封面容器类为cover-wrap */
#cover-toggle:checked ~ .cover-wrap {
  z-index: -1;
}
/* 同步处理inner_cover的层级 */
#cover-toggle:checked ~ .cover-wrap .inner_cover {
  z-index: -1;
}

封面打开后，就不会再挡住内页的点击区域。

2. 缩小封面点击触发范围 #

不要让封面checkbox覆盖整个页面，仅给封面的可交互边缘（比如左侧10%宽度）绑定触发区域：

.cover-wrap {
  position: relative;
}
/* 给封面添加仅左侧可点击的伪元素作为触发区 */
.cover-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10%; /* 仅左侧区域可触发封面翻页 */
  height: 100%;
  z-index: 2; /* 闭合时确保触发区在最上层 */
}
/* 封面展开后隐藏触发区 */
#cover-toggle:checked ~ .cover-wrap::before {
  display: none;
}

既保留封面翻页触发功能，又不会遮挡内页点击区域。

3. 优化inner_cover显示逻辑 #

因为inner_cover是为避免图片反转添加的，确保它仅在封面闭合时显示，展开后隐藏：

.inner_cover {
  display: block;
}
#cover-toggle:checked ~ .cover-wrap .inner_cover {
  display: none;
}

也可以调整其层级，让它随封面一起降到内页以下。

4. （可选）用事件委托替代多checkbox #

如果内页数量较多，多个checkbox的层级管理容易出问题，可改用JavaScript事件委托统一处理翻页：

// 假设书本容器id为book-container，每页类为page
document.getElementById('book-container').addEventListener('click', function(e) {
  const page = e.target.closest('.page');
  if (!page) return;
  // 切换翻页类（比如flip类）
  page.classList.toggle('flip');
});

这种方式不依赖checkbox，直接通过事件委托处理点击，从根源上避免元素遮挡问题。

内容的提问来源于stack exchange，提问作者Hillary C.