直接加 transform: translatey(-5px) 没反应是因为缺少 transition、起始 transform 状态及 will-change 提示；需补全三要素并协同处理阴影、容器溢出、设备适配等问题。
为什么直接加 transform: translateY(-5px) 没反应？
Bootstrap 5 的 .card 默认没有设置 transition，也没有启用硬件加速的渲染层。光写悬停位移，浏览器不会做平滑过渡，甚至可能因重排卡顿而“闪一下”就结束。
必须同时补全三要素：transition 属性、transform 的起始状态（否则首次悬停会突变）、以及可选但推荐的 will-change: transform 提前提示渲染引擎。
-
transition推荐写成transition: transform 0.3s ease, box-shadow 0.3s ease—— 同时过渡位移和阴影，视觉更自然 - 起始状态不要省略：给
.card加transform: translateY(0)，哪怕它本来就在原位 - 如果卡片内含图片或按钮，确保它们没用
position: absolute脱离文档流导致悬停后内容错位
如何让阴影随升起同步变深且不模糊边缘？
直接用 box-shadow: 0 8px 16px rgba(0,0,0,0.2) 在悬停时容易边缘发虚，尤其在高 DPI 屏幕上。Bootstrap 自带的 .shadow-sm/.shadow 类是固定值，无法响应悬停动态变化。
正确做法是手动定义两套阴影值，用 filter: drop-shadow() 替代部分场景反而更锐利，但更稳妥的是控制 box-shadow 的 blur-radius 和 spread-radius 组合：
- 常态：
box-shadow: 0 2px 4px rgba(0,0,0,0.1) - 悬停态：
box-shadow: 0 6px 12px -2px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.05)—— 多层阴影叠加，内层负 spread 收紧边缘，外层提供深度感 - 避免用过大的
blur-radius（如 >20px），会导致阴影“融化”，失去立体反馈
在 Bootstrap 5 的栅格系统里悬停失效怎么办？
常见于把 .card 放进 .row > .col-* 后，鼠标移到卡片边缘时特效中断。本质是父容器（如 .col）默认 overflow: visible，但某些自定义 CSS 或第三方插件可能误设为 hidden 或 clip，裁剪了 transform 后溢出的部分。
检查并确保这些容器没意外限制渲染范围：
- 用浏览器开发者工具检查悬停时卡片是否被父元素的
overflow截断 - 若确有裁剪，给父
.col加overflow: visible !important（仅调试用），生产环境建议改用z-index配合position: relative提升层级 - 不要依赖
z-index单独生效：必须配合position: relative或absolute才能触发层叠上下文
移动端点击无反馈？需要适配 :active 吗？
CSS :hover 在多数触摸设备上不触发（iOS Safari 尤其严格），纯靠悬停做交互反馈对手机用户无效。但加 :active 又太生硬——点下去就升，松开立刻落回，缺乏“按压感”。
折中方案是用 @media (hover: hover) and (pointer: fine) 精准识别真鼠标设备，只对它们启用悬停动画；对触摸设备则退化为点击态微调：
- 鼠标设备：完整
:hover { transform: translateY(-5px); } - 触摸设备：用
:active { transform: translateY(-2px); }+ 更短的transition: 0.15s，模拟物理按压回弹 - 别忘了移除
outline或加outline: none防止点击时出现焦点环干扰效果
真正难的不是写出这十几行 CSS，而是得意识到：悬停特效不是独立样式，它和栅格容器、阴影层级、设备能力、甚至父元素的 overflow 都在悄悄打架。漏掉其中一环，用户看到的就是“有时灵有时不灵”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
