点击图标无响应需检查label与input绑定：确保input[type="checkbox"]紧邻label、for与id完全一致、图标直接写在label内；热区应≥44×44px；需添加hover/active视觉反馈；折叠时同步设置tabindex="-1"和aria-hidden="true"以保障可访问性。
点击图标没反应？检查 label 和 input 的绑定关系
纯 CSS 实现侧边栏开关时，图标本质是 label，不是按钮或 div。常见错误是把图标包在 div 里再绑事件，或者漏写 for 属性——这会导致点击完全无响应。
必须确保：
- input[type="checkbox"] 在 DOM 中紧挨着它的 label（中间不能有换行、空格或其它标签）
- label 的 for 值与 input 的 id 完全一致（大小写、连字符都不能错）
- 图标直接写在 label 内部，例如 <label for="sidebar-toggle"><svg>...</svg></label>
热区太小，手指点不中？强制设置最小尺寸和内边距
移动端点击不准不是用户问题，而是热区没达标。iOS/Android 规范要求可点击区域 ≥ 44×44px，仅靠 SVG 图标本身（比如 24×24）远远不够。
解决方式：
- 给 label 加 display: inline-flex 或 display: block
- 设置 width: 44px、height: 44px、padding: 12px（总尺寸 = 44×44）
- 配合 justify-content: center 和 align-items: center 居中图标
- 别依赖 font-size 或 transform: scale() 放大图标——它们不扩大点击区域
图标悬停/激活态失效？别只改颜色，要加视觉反馈
光写 label:hover { opacity: 0.8 } 不够。真实场景下，用户需要明确知道“我点到了”，尤其在触摸屏上没有 hover 状态。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
推荐做法：
- 悬停时加 background-color: #f0f0f0 + border-radius: 8px
- 激活态（label:active）用 transform: scale(0.95) 模拟按压反馈
- 如果用 SVG，确保 fill 跟随 currentColor，这样悬停改 color 就能联动变色
- 避免只靠 opacity 变化——低对比度屏幕下几乎看不出
折叠后图标还被聚焦？同步处理键盘可访问性
当侧边栏收起时，如果 label 仍保留在 tab 顺序里，键盘用户按 Tab 键会聚焦到一个看不见的图标上，体验断裂。
立即学习“前端免费学习笔记（深入）”；
必须配合状态切换：
- 折叠时给 label 加 tabindex="-1"
- 同时设 aria-hidden="true"（展开时还原为 aria-hidden="false"）
- 不要用 visibility: hidden 或 opacity: 0 替代 display: none —— 它们不移除焦点能力
- 若用 details/summary，原生支持键盘操作，无需额外处理
真正卡住人的不是“怎么放大图标”，而是热区、焦点、可访问性三者没对齐。改完尺寸，一定要在真机上用手指点三遍，再用键盘 Tab 测试两轮。
