hover动画鼠标移入无反应常见因父元素pointer-events: none或子元素display: none；focus动画需元素可聚焦（如加tabindex="0"）；hover与focus可共存但须注意触发逻辑和过渡一致性；移动端应避免依赖:hover。
hover 动画为什么鼠标移入没反应
常见原因是父元素设置了 pointer-events: none，或子元素被 visibility: hidden（注意：它不阻止事件，但 display: none 会彻底移除交互能力）。另外，触发元素必须是“可交互”的——<div> 默认可以，但 <span> 在某些嵌套下可能被外层遮挡，建议加 cursor: pointer 辅助调试。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的「Elements → Styles」面板检查
:hover伪类是否被激活（勾选「Force state」） - 确保动画属性写在
:hover规则里，而非仅定义@keyframes后忘记调用animation - 避免对
display属性做动画——它无法过渡，会导致瞬间切换
focus 动画只在键盘操作时生效？
:focus 默认只响应键盘 Tab 导航或 JavaScript 的 .focus() 调用，鼠标点击 <button> 或 <a> 也能触发，但普通 <div> 必须加 tabindex="0" 才能获得焦点。否则鼠标点它，:focus 规则完全不会匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给需要支持 focus 动画的非表单元素加上
tabindex="0"（不要用-1，它不可通过 Tab 进入） - 配合
:focus-visible更合理：它只在真正由键盘触发时生效，避免鼠标点击后意外高亮 - 若需鼠标点击也触发类似效果，别强依赖
:focus，改用 JS 切换 class +transition
hover 和 focus 动画能同时存在吗
可以，但要注意层叠顺序和触发逻辑。CSS 中多个伪类可连写，比如 a:hover:focus 表示“既悬停又获得焦点”，而 a:hover, a:focus 是并列关系，任一满足即生效。不过要注意：鼠标悬停时，元素通常不会自动获得焦点，除非它本身是可聚焦元素且用户主动点了它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想让 hover 和 focus 效果一致？直接写成
button:hover, button:focus共享样式 - 想区分行为？用
button:hover:not(:focus)单独控制纯悬停态 - 动画时间尽量统一（如都设
transition: all 0.2s ease），否则 hover 进入快、focus 离开慢，视觉节奏会断裂
移动端 touch 设备上 hover 失效怎么办
iOS Safari 和多数安卓浏览器对 :hover 支持极弱——首次触摸会触发一次 :hover，之后立即失效；部分浏览器干脆忽略。这不是 bug，而是规范限制：:hover 在无指针设备上本就不保证可用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要把核心交互动画只绑定在
:hover上，尤其涉及功能提示或状态反馈时 - 用
@media (hover: hover) and (pointer: fine)做特性检测，只在真有鼠标/触控笔的设备上启用 hover 动画 - 更可靠的方式：监听
touchstart/click事件，用 JS 添加临时 class 控制动画
