如何给父容器内多个子元素设置独立悬停过渡动画

在前端开发中，构建响应式视频卡片组件时，一个常见痛点出现在用户悬停父容器（如 .item-video-kami）时：期望同时触发图片平滑放大（scale）与叠加播放图标（.play-icon）渐显的动画，但实际测试却往往只有图片生效，图标毫无反应。这一现象在响应式布局中尤为突出，影响了交互体验的统一性。

追根溯源，问题核心并不复杂：.play-icon 缺少明确的定位上下文与层叠优先级。尽管设置了 opacity 过渡，但图标因被图片遮挡或脱离渲染流，无法将正确的显示效果呈现给用户。

关键修复点解析

1. 补全绝对定位边界
   原代码中 .play-icon 仅设 position: absolute，但未定义 top、bottom、left、right 中的任一值，导致其尺寸坍缩，定位形同虚设。修复方案如下：

   .item-video-kami > .play-icon {  top: 0; bottom: 0; left: 0; right: 0; /* 全向撑满父容器 */}

2. 确保图层层级正确
   在常规流中， 标签默认渲染在

   之上。即使 .play-icon 的 opacity 发生变化，若 z-index 不高于图片，效果仍会被遮挡。必须显式提升层级：

   .item-video-kami:hover .play-icon {  z-index: 2; /* 高于 img（默认 z-index: 1） */}

3. 优化父容器布局上下文
   父容器的布局属性也需检查。添加 display: inline-block 与 height: 100%，可有效避免因父容器高度塌陷导致的子元素定位异常：

   .item-video-kami {  display: inline-block;  height: 100%;}

完整可运行示例

以下为整合后的完整代码，可直接在项目中测试悬停动画效果：

注意事项与最佳实践

• 过渡属性粒度控制：除非紧急场景，否则不建议使用 transition: all。推荐显式声明关键属性，例如 transition: transform .5s ease, opacity .2s ease-in .1s，既能提升性能，也便于后续维护。
• SVG 图标兼容性：若 SVG 内部的 fill 未被 CSS 的 color 属性覆盖，请检查 SVG 是否使用了 fill="currentColor"。只有这样才能继承父级定义的 color 值，实现统一配色。
• 移动端适配：悬停状态在触摸设备上并不可靠。建议结合 @media (hover: hover) 媒体查询做降级处理，或在必要场景增加对 :focus-within 的支持，以提供一致的点击反馈。
• 性能提示：transform 和 opacity 是仅触发合成的 CSS 属性，不会引发重排（reflow），非常适合高频动画场景。反之，应尽量避免对 width、height、top 等属性做过渡。

通过上述结构化调整，即可稳定实现“单次悬停、多子元素协同动画”的效果。在确保语义清晰、视觉统一的同时，也能有效保证跨浏览器的一致性。