:hover是图片手风琴首选方案，因其天然匹配悬停放大、挤压其余图的交互，无需js、无状态残留、兼容性好（ie9+），而:target和:checked不适用于流式图片轮播。
纯 CSS 实现图片手风琴效果，最可靠的方式是用 :hover 配合 transition 控制宽度变化，而不是依赖 :target 或 :checked —— 后两者在图片轮播类场景中无法响应鼠标悬停、缺乏即时反馈，且不支持连续滑动动画。
为什么 :hover 是图片手风琴的首选方案
图片手风琴的核心交互是「悬停放大某张图，挤压其余图」，这天然匹配 :hover 的触发时机和可预测性。而 :target 要求 URL 带锚点、页面跳转，:checked 需点击且状态持久，都不适合图片流式展示。
-
:hover不需要 JS、无状态残留、支持平滑过渡，浏览器兼容性好（IE9+） - 所有图片必须包裹在同一个容器（如
<ul></ul>）内，且子项为块级元素（<li>或<div>），否则 <code>ul:hover li选择器会失效 - 必须显式设置
overflow: hidden在父容器上，否则宽度收缩时溢出内容会暴露 - 用
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)比默认ease更有弹性感 - 不要只写
transition: all，它会让背景色、边框等无关属性也参与动画，拖慢渲染 - 如果图片高度固定，建议同时加
height: 320px和flex-shrink: 0，避免 flex 布局下被意外压缩 - 父容器
<ul></ul>缺少white-space: nowrap或子项未设display: inline-block/float: left，导致li换行，ul:hover li无法批量控制 -
img标签默认是inline元素，底部有空白间隙，会撑高容器；应加vertical-align: top或设display: block - 使用了
position: absolute定位图片，脱离文档流后，li高度塌陷，hover 区域变小甚至消失 - 若需真·移动友好，得 fallback 到
input[type="checkbox"]+:checked，但这就不再是“纯悬停”手风琴了 - 折中方案：保留
:hover，同时给li加cursor: pointer和tap-highlight-color: transparent提升触控感知 - 别用
transform: scale()替代宽度变化——它不触发重排，但会模糊图片，尤其在 Retina 屏上明显
transition 动画的关键参数怎么设
图片手风琴的“挤压-展开”感，靠的是宽度突变 + 过渡缓动。直接写 width: 100px → width: 640px 会生硬，需配合 transition 控制节奏和延迟。
常见布局错位导致 hover 失效的三个原因
即使 CSS 写对了，hover 也可能没反应——大概率是 HTML 结构或盒模型出了问题。
移动端适配要绕开的坑
iOS Safari 和 Android Chrome 对 :hover 支持有限：触摸屏首次点击才触发一次 hover，之后不持续响应。不能只靠 :hover。
真正难的不是写出第一版动画，而是让六张图在不同屏幕宽度下保持比例一致、hover 区域精准覆盖、缩放时不撕裂也不模糊。这些细节不会报错，但用户一眼就能感觉到卡顿或错位。
