移动端无悬停（hover）状态，因此依赖 :hover 的下划线动画无法触发；需通过媒体查询、伪类切换或触摸事件模拟来适配触控设备。
移动端无悬停（hover）状态，因此依赖 :hover 的下划线动画无法触发；需通过媒体查询、伪类切换或触摸事件模拟来适配触控设备。
在桌面端流畅运行的 :hover 下划线动画（如 .hover-underline-animation:after 配合 transform: scaleX(0/1)），在 iOS 和 Android 设备上普遍失效——这不是 CSS Bug，而是底层交互模型的根本差异：移动浏览器不支持真正的 hover 状态。当用户用手指轻触按钮时，系统仅触发 touchstart / click，而不会触发 :hover 伪类（即使 Safari 在某些场景下短暂模拟 hover，也常被禁用或不可靠）。
✅ 正确的移动端适配策略
1. 使用 @media (hover: hover) 智能降级（推荐）
现代 CSS 提供了 hover 媒体特性，可精准检测设备是否支持悬停：
/* 默认状态：移动端始终显示下划线（或启用点击反馈） */
.hover-underline-animation:after {
content: '';
position: absolute;
width: 85%;
height: 0.15em;
bottom: 0;
left: 0;
background-color: black;
/* 移动端默认可见，无需动画 */
transform: scaleX(1);
}
/* 仅在支持 hover 的设备上启用动画逻辑 */
@media (hover: hover) and (pointer: fine) {
.hover-underline-animation:after {
transform: scaleX(0);
transition: transform 0.25s ease-out;
}
.button:hover .hover-underline-animation:after {
transform: scaleX(1);
}
}✅ pointer: fine 进一步排除粗粒度触控（如平板手写笔），确保仅对鼠标/触控板生效。
2. 补充触摸态反馈（增强用户体验）
为弥补 hover 缺失，建议为按钮添加 :active 状态样式，提供即时视觉响应：
立即学习“前端免费学习笔记（深入）”；
.button:active .hover-underline-animation:after {
transform: scaleX(1) !important; /* 强制激活时显示 */
opacity: 0.8;
}同时可配合轻微缩放或背景色变化，提升可感知性：
.button:active {
transform: scale(0.98);
transition: transform 0.1s;
}3. （进阶）JavaScript 模拟 hover（谨慎使用）
若需完全一致的行为（如复杂动画链），可用 JS 监听 touchstart/touchend 并动态增删 class：
const button = document.querySelector('.button');
if ('ontouchstart' in window) {
button.addEventListener('touchstart', () => {
button.classList.add('is-touched');
});
button.addEventListener('touchend', () => {
setTimeout(() => button.classList.remove('is-touched'), 300);
});
}对应 CSS：
.button.is-touched .hover-underline-animation:after {
transform: scaleX(1);
}⚠️ 注意：避免在 touchstart 中直接触发 click，以防重复执行；优先使用原生 :active + @media (hover: hover) 组合方案。
总结
- 根本原因：移动设备无物理悬停能力，:hover 在触摸屏上不可靠或被忽略；
- 最佳实践：用 @media (hover: hover) 条件化启用 hover 动画，移动端默认展示静态下划线或激活态反馈；
- 无障碍提示：确保按钮具备足够对比度与尺寸（最小 44×44px），并为屏幕阅读器提供 aria-label；
- 测试建议：在真机 Safari/Chrome 中开启「开发者工具 → Toggle Device Toolbar」后，务必关闭 “Emulate hover” 选项（默认可能开启），以还原真实行为。
遵循以上方案，即可让下划线动画在桌面端优雅过渡、在移动端稳定可用，真正实现跨设备一致性体验。
