:active无法实现真正的点击图片放大预览，因其仅在按下瞬间生效、不维持状态、无法控制其他元素；可靠方案是用:checked配合隐藏checkbox，或:focus-within配合可聚焦容器。
纯 CSS 实现“点击图片放大预览”效果，:active 伪类本身**无法完成真正意义上的预览**——它只在按下瞬间生效，松开即恢复，且不支持跨元素控制（比如不能让模态框显示）。所谓“用 :active 实现点击放大”，实际只能做**瞬时按压反馈**，和用户期待的“点开大图查看”是两回事。真要预览，必须结合 HTML 结构 + :checked + <input type="checkbox"> 隐藏控件，或退而求其次用 :focus-within 配合可聚焦容器。
为什么 :active 不能当预览用
:active 的生命周期极短：仅在鼠标按下 / 触屏按住期间匹配，手指一抬就失效。它不保存状态，也不能触发其他元素显示。常见误用是写成这样：
.photo:active {
transform: scale(1.5);
}这只会让图片在点击瞬间放大，松手立刻缩回，毫无预览价值。更糟的是，在触摸设备上，:active 常因延迟或未触发而完全不可靠。
- 不维持状态：无法让放大持续，更不能遮罩背景或插入新 DOM
- 无事件穿透能力：不能控制兄弟元素（如模态框
#modal）的display或opacity - 移动端兼容风险高：iOS Safari 对
:active默认禁用，需手动加* { cursor: pointer; }才可能激活
用 :checked + 隐藏 checkbox 模拟点击预览
这是目前最稳定、无需 JS 的纯 CSS 预览方案。核心是把图片包装进
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须包含：
<input id="modal-1" type="checkbox">、<label for="modal-1"><img alt="如何实现CSS点击图片放大预览效果_利用:active或伪元素过渡" ></label>、<div class="modal">...</div> - CSS 中用
input[type="checkbox"]:checked ~ .modal控制模态框可见性（注意是~同级后续兄弟选择器，不是+） - 关闭按钮必须是
<label for="modal-1">×</label>，靠再次点击取消勾选 - 务必设置
input { position: absolute; clip: rect(0 0 0 0); }彻底隐藏但保留可交互性
关键样式示例：
input[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
}
.modal {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
input[type="checkbox"]:checked ~ .modal {
opacity: 1;
visibility: visible;
}
:focus-within 方案的适用边界
如果你能接受“点击后需再按 Esc 或点空白处关闭”，:focus-within 是更轻量的选择：把图片和模态框包进同一个容器，给容器设 tabindex="0"，再用 :focus-within 显示模态框。
- 优点：结构简单，无需 checkbox 和 label 绑定；支持键盘导航（Tab 进入后按 Esc 可退出）
- 缺点：无法用鼠标点击外部区域直接关闭（得靠 JS 或额外 focusable 元素）；IE 完全不支持，需确认兼容要求
- 必须确保容器内有至少一个可聚焦子元素（如
<button></button>关闭按钮），否则:focus-within不会触发
典型结构：
<div class="preview-container" tabindex="0"> <img src="a.jpg" alt="如何实现CSS点击图片放大预览效果_利用:active或伪元素过渡" > <button class="close">×</button> <div class="modal-content"><img src="a.jpg" alt="如何实现CSS点击图片放大预览效果_利用:active或伪元素过渡" ></div> </div>
动画性能与 transform-origin 的坑
无论用哪种方案，放大动画都建议用 transform: scale() 而非 width/height，否则会触发重排。但容易忽略两点：
-
transform-origin默认是50% 50%（居中），如果图片在容器里不是居中对齐，放大后会偏移。应显式设为transform-origin: center center;或根据布局调整 - 若模态框内图片使用
max-width: 80%，又同时设transform: scale(1.2)，最终尺寸 = 原始宽 × 1.2 × 0.8，容易误判大小。建议统一用transform控制缩放，尺寸用width固定 - 过渡属性别漏写
transform：写成transition: all 0.4s会把所有属性都过渡，可能拖慢；应明确写transition: transform 0.4s ease, opacity 0.4s ease;
真正可靠的点击预览，从来不是靠 :active，而是靠状态驱动的伪类组合。别被“点击”二字带偏——你要的不是按下那一刻，而是按下之后的状态留存与界面响应。
