如何让鼠标悬停时文字平滑上移

用transform: translateY(-8px)实现悬停上移，必须搭配transition: transform 0.3s ease且写在默认状态，避免重排、确保进出平滑；移动端需降级处理。

用 transform: translateY 实现悬停上移

直接改 margin-top 或 position: relative 的 top 会导致重排（reflow），性能差且无法平滑过渡；必须用 transform: translateY()，它只触发重绘（repaint），配合 transition 才能真正平滑。

关键点：transform 要写在悬停前的默认样式里（哪怕初始值是 0），否则第一次 hover 会跳变：

.hover-up {  transform: translateY(0);  transition: transform 0.3s ease;}.hover-up:hover {  transform: translateY(-8px);}

transition 的 timing-function 怎么选

用 ease 是最自然的——起步慢、中间快、结尾缓；如果文字偏重或想更轻盈，可换 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 iOS 弹性效果）；避免用 linear，会显得机械生硬。

常见误配：

立即学习“前端免费学习笔记（深入）”；

• 漏写 transition-property，只写 transition: 0.3s → 会过渡所有可动画属性，可能意外带动颜色、opacity 等
• 把 transition 只写在 :hover 里 → 移出时无过渡，文字“啪”一下掉回原位

文字上移后遮挡其他元素怎么办

上移本身不改变文档流，但视觉上可能盖住下方内容。解决方式取决于布局：

• 父容器设 overflow: hidden → 简单粗暴，适合卡片类场景
• 给相邻元素加 margin-top 补偿（比如上移 -8px，就给下一项加 margin-top: 8px）→ 仅适用于静态布局
• 用 will-change: transform 提前告知浏览器该元素将动画 → 减少偶发的层叠错乱（尤其在 Safari 中）

注意：不要依赖 z-index 单独解决——transform 会创建新的层叠上下文，盲目调 z-index 可能引发更难调试的堆叠顺序问题。

移动端悬停失效？别硬套 :hover

手机没有“悬停”概念，:hover 在 iOS Safari 和部分安卓浏览器中仅在点击后短暂触发，甚至完全不响应。真实项目中必须考虑降级：

• 用 @media (hover: hover) and (pointer: fine) 媒体查询包裹 hover 样式 → 确保只在有精准指针且支持 hover 的设备生效
• 对纯触屏设备，改用点击态（如 :active）或 JS 控制 class 切换
• 若用于按钮或链接，确保上移幅度 ≤ 4px —— 太大在小屏上易误触邻近区域

最常被忽略的一点：动画时长别设太短（500ms）。300ms 左右是人眼感知“响应及时”和“过程清晰”的平衡点，低于这个值容易觉得卡顿，高于则像延迟反馈。