:hover 本身不触发滑动，真正实现平滑滑动的是 transition 属性，需配合 transform 等可动画属性，并在默认状态定义 transition 才能生效。
伪类 :hover 本身不触发滑动，过渡靠 transition
很多人误以为 :hover 能“直接滑动”，其实它只是状态切换的触发器。真正实现平滑滑动效果的是 transition 属性，配合可动画的 CSS 属性（比如 transform、left、width 等）才能生效。
常见错误是只写 :hover { transform: translateX(20px); } 却没加 transition，结果变成瞬时跳变。
-
transition必须写在「默认状态」（非 hover）上，否则首次悬停无过渡 - 推荐用
transform而非left/top：性能更好，不触发重排 - 避免对
height或margin做过渡——它们会引发重排，卡顿明显
用 transform + transition 实现滑入滑出
这是最稳妥、兼容性好（IE10+）、性能高的方案。滑动本质是位移变化，transform: translateX() 或 translateY() 是首选。
button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
/* 关键：定义过渡属性、时长、缓动函数 */
transition: transform 0.3s ease-out;
}
<p>button:hover {
transform: translateX(8px);
}如果需要“从右外滑入”这类效果，可先用 transform: translateX(100%) 把元素藏在视口外，再通过 :hover 拉回：
立即学习“前端免费学习笔记（深入）”；
.slide-in-right {
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
<p>.slide-in-right:hover {
transform: translateX(0);
}cubic-bezier(0.34, 1.56, 0.64, 1) 是个轻微弹跳的缓动，比纯 ease 更有动感，但别过度使用高弹性值，容易显得失控。
伪类组合与多段滑动：小心选择器优先级和触发时机
:hover 可以链式使用，比如 nav a:hover::after，但要注意两点：
- 如果滑动目标是子元素（如下划线、图标），必须确保该子元素在 DOM 中存在且未被
display: none隐藏（可用opacity: 0; visibility: hidden;配合transition） - 嵌套
:hover（如.menu:hover .submenu）容易因鼠标移动间隙导致闪退，建议加transition-delay或用will-change: transform提前提示渲染引擎 - 移动端没有
:hover，iOS Safari 仅在点击后短暂触发一次，不能依赖它做核心交互
调试滑动失效的三个高频原因
写完代码没反应？先查这三项：
-
transition的属性名写错，比如写成transfrom或漏掉单位（0.3s不是0.3） - 悬停目标被父容器
overflow: hidden截断，滑动部分被裁掉，需检查父级overflow和position - 元素初始状态和
:hover状态之间没有「可动画差异」，例如都写transform: translateX(0)，自然没变化
复杂滑动逻辑（比如多方向、条件触发）建议改用 @keyframes + animation，:hover 只负责启停，不然维护成本陡增。
