简历中:hover失效主因是悬停未触发：table无热区、disabled或pointer-events:none禁用事件、移动端无hover；动效应优先用transform/opacity避免重排，transition须写在常态规则中，多状态需独立控制，并兼顾移动端与键盘导航。
为什么简历里加:hover容易失效
不是代码写错了，而是很多场景下悬停根本没触发——比如表格用 table:hover，但 table 自身没内容、没内边距、border-collapse: collapse 下热区为空，鼠标实际落在 td 上，table 根本收不到事件。又比如按钮加了 disabled 属性，或父容器设了 pointer-events: none，:hover 就彻底静音。
常见踩坑点：
-
tr:hover比table:hover更可靠，且必须配合tr:hover td显式设置背景，否则td原有样式会盖掉悬停色 - 移动端不触发
:hover，纯靠它做关键反馈（如展开技能详情）会导致手机用户完全无感知 -
transition写在:hover选择器里？第一次悬停没动画——它必须写在常态规则中，比如.skill-item { transition: transform 0.2s ease; }
用 transform 和 opacity 做简历微动效最稳
简历里常见的“悬停放大头像”“条目上浮”“技能标签呼吸感”，优先用 transform: scale() 或 translateY()，别碰 width/height 或 top/left。后者触发布局重排（reflow），尤其在 section 堆叠多时，滚动或悬停都可能卡顿。
实操建议：
- 给
.project-card加transform: translateY(-4px)悬停上浮，比margin-top: -4px更轻量 - 技能标签云用
opacity: 0.7 → 1配合transition: opacity 0.25s，比改颜色更柔和、兼容性更好 - 避免混用
transform和top：一旦元素有transform，top就被忽略，调试时容易白忙活 - 贝塞尔曲线比
ease更自然，直接用cubic-bezier(0.25, 0.46, 0.45, 0.94)，不用记参数，去cubic-bezier.com调完复制就行
多状态叠加时怎么防 transition 冲突
简历里一个 .btn-contact 可能同时有正常态、悬停态、禁用态、点击态（:active）。如果所有状态都共用同一套 transition，禁用后还残留悬停动画，或点击缩放还没结束就移开鼠标，视觉节奏就乱了。
解决办法很直接：
- 禁用态显式关掉过渡：
.btn-contact:disabled { transition: none; } - 点击反馈用短时独立过渡：
.btn-contact:active { transform: scale(0.96); transition-duration: 0.08s; } - 不要写
transition: color 0.2s, background-color 0.4s—— 两个属性不同步，动画会“拖尾” - 如果用了 CSS Modules 或 BEM，确保类名足够具体，比如
.experience__item:hover，避免被全局button:hover规则意外覆盖
移动端 fallback 不是可选项，是必填项
简历是求职材料，不是演示站。iOS 和安卓浏览器默认不模拟 hover，手指点下去是 :active，松开就回常态，没有“悬停”这个中间态。指望 :hover 让 HR 在手机上看到技能展开效果？基本等于没做。
务实做法：
- 关键信息（如项目详情、技能说明）不能只靠悬停显示，必须有常驻文本或点击展开逻辑
- 纯装饰性动效（如卡片轻微上浮、图标淡入）可用
@media (hover: hover) and (pointer: fine)包裹，触屏设备自动跳过 - 调试时在 Chrome DevTools 里开「Toggle device toolbar」，再点「Emulate hover」手动验证，别只在桌面测
- 键盘用户同样重要：
:focus样式必须和:hover一致，否则用 Tab 键浏览的候选人会丢失反馈
真正难的不是写出 .card:hover { transform: scale(1.02); }，而是判断这个动效在禁用态是否该消失、在手机上有没有替代方案、在键盘导航下是否依然可感知——微交互的细节，全藏在这些“不显眼”的分支里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
