卡片悬停上浮本质是用transform: translateY()配合transition实现，避免margin/top触发重排；推荐translateY(-8px)与transition: transform 0.3s ease组合，并加will-change: transform优化性能。
卡片 hover 上移效果本质是用配合过渡动画，不是靠或位移——后者会触发重排，性能差且容易抖动。
为什么用
而不是
直接改
或
会让浏览器重新计算布局（reflow），尤其在多卡片网格中，滚动或悬停时容易卡顿；
属于合成层操作，由 GPU 加速，动画更顺滑。
是推荐写法，数值按需调整（常见 -5px 到 -12px）
必须搭配
，否则没动画
别漏写
（可选，对长列表有轻微优化）
触发时怎么避免文字/图标错位
卡片内如果用了
或未清除浮动的子元素，
可能导致基线偏移，文字看起来“跳”得不整齐。
给卡片容器加
，防止子元素溢出影响渲染
子元素统一用
或改用
布局
图标字体（如 Font Awesome）建议用
控制大小，别依赖
居中
移动端 hover 失效？要兼容触摸设备
真机上没有 “hover” 状态，纯
在 iOS/Android 浏览器里基本不触发（除非模拟鼠标模式）。不能只靠 CSS。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
简单方案：加
媒体查询，只对支持悬停的设备启用上移效果
更稳妥做法：用 JS 监听
+
模拟 hover 类（比如加
类）
注意：别在
里立刻加类，要防误触，可加
延迟 150ms 再判断是否为长按
多个卡片同时 hover，怎么控制只动当前一个
常见错误是给父容器加 hover，结果所有子卡片一起动。关键在选择器粒度。
确保样式写在卡片自身元素上，例如：
避免写成
—— 这样只要鼠标进容器，哪怕没悬停卡片也会动
如果用 CSS-in-JS 或框架（如 Tailwind），检查是否意外把 hover 类作用到了 wrapper 上
真正难的不是让卡片动起来，而是动得稳、动得准、动得不干扰其他交互——尤其是混合了图片懒加载、阴影展开、文字截断的卡片，
的层级和渲染行为得反复调。
transform: translateY()margintoptransformmargin-topmargin-toptoptransformtransform: translateY(-8px)transition: transform 0.3s easewill-change: transform:hoverdisplay: inline-blocktransformoverflow: hiddenvertical-align: topflexfont-sizeline-height:hover@media (hover: hover) and (pointer: fine)touchstarttouchendis-hoveredtouchstartsetTimeout.card:hover { transform: translateY(-8px); }.card-container:hover .cardtransform