常见问题及解决方案：卡片悬停遮挡需设 position: relative 和 overflow: hidden；动画用 transform/opacity 避免重排重绘；移动端用 @media (hover: hover) 区分设备，慎用 will-change 防 oom。
卡片悬停时内容被遮挡或溢出
常见原因是 overflow: hidden 缺失，或父容器未设 position: relative，导致子元素（如悬停后上浮的标题、阴影）脱离布局流后压盖相邻卡片。必须确保卡片容器有明确定位上下文和裁剪边界。
实操建议：
- 给卡片根元素加
position: relative和overflow: hidden - 悬停时上移的子元素（如
.card-title）用transform: translateY(-8px)，而非top—— 后者会触发重排，且需额外设position: absolute易失控 - 避免在
:hover中修改height或padding，这会导致页面抖动
移动端悬停动画失效或误触发
CSS :hover 在触摸设备上行为不一致：部分 Android 浏览器模拟一次点击后触发 hover，iOS Safari 则常忽略或延迟响应。这不是 bug，是规范允许的行为。
实操建议：
- 用
@media (hover: hover) and (pointer: fine)包裹悬停样式，只对鼠标精准设备启用 - 移动端改用
:active做轻量反馈（如背景色微变），或配合 JavaScript 监听touchstart添加临时类 - 别依赖悬停显示关键信息（如按钮文字），所有重要内容必须默认可见
动画卡顿或闪烁（尤其在 Chrome 上）
本质是浏览器未能将动画提升到合成层，导致频繁重绘。常见于对 width、height、left、top 等触发 layout 的属性做动画。
实操建议：
- 只对
transform和opacity做动画 —— 它们由 GPU 合成，不触发布局与绘制 - 强制开启硬件加速：给卡片加
will-change: transform（仅在必要时，避免滥用） - 动画时长控制在 200–300ms，用
ease-out或cubic-bezier(0.34, 1.56, 0.64, 1)比ease更自然 - 避免在
:hover中加载图片或字体，这些会阻塞合成帧
响应式断点下动画比例失调
比如在小屏上用 transform: scale(1.03) 看不出变化，大屏上却撑破容器。固定像素值（如 translateY(-10px)）在不同密度屏幕下物理位移不一致。
实操建议：
- 用相对单位：优先
rem或em，慎用px；缩放用无单位值（scale(1.02)），位移用vh/vmin（如translateY(-2vmin)） - 在
@media中重置动画参数，例如小屏减小位移量：@media (max-width: 768px) { .card:hover { transform: translateY(-4px); } } - 测试真机：Chrome DevTools 的「Toggle device toolbar」仅模拟视口，无法反映触摸延迟或 GPU 性能差异
will-change 的副作用 —— 它会让元素提前分配图层内存，若大量卡片同时设该属性，低端安卓机可能直接 OOM。宁可少写一行，也别为“看起来更顺”牺牲稳定性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
