纯css无法实现真·长按渐深，因:hover不等价于长按、:active仅瞬时生效；可行方案为：①用:active+transition模拟短按缓动反馈，②用js监听touchstart/mousedown并加类实现真长按。
长按触发时颜色渐深，但不能用:hover
纯CSS实现长按（press-and-hold）并伴随颜色渐深过渡，本质是绕过 :hover——因为鼠标悬停不等于长按，且移动端没有稳定 hover。真正能捕捉“按下持续状态”的伪类只有 :active，但它默认只在手指/鼠标按下期间生效，松开就立刻结束，无法撑起过渡动画。
所以必须配合 transition + :active，且关键点在于：过渡属性得作用在「松开后仍保留的状态」上。但纯CSS做不到状态持久化，因此实际可行方案只有两种：一种是接受 :active 的瞬时性，靠延长过渡时间“模拟”渐深；另一种是引入少量JS监听 touchstart/mousedown 并加类控制。
-
:active本身不支持transition-delay延迟启动，所以“按住1秒再开始变色”纯CSS做不到 - 移动端
:active在某些iOS Safari版本中默认被禁用，需加* { -webkit-tap-highlight-color: transparent; }并确保元素有cursor: pointer或touch-action: manipulation - 如果用
transition: background-color 0.3s ease;配合:active，松手瞬间颜色会突兀回退——这不是bug，是预期行为
用 :active 实现最简渐深（适合按钮类短按反馈）
这是零JS、兼容性最好、也最贴近“长按视觉反馈”的做法，适用于按钮、卡片等点击即响应的场景。重点不是“长”，而是让按下过程有缓动感。
button {
background-color: #4a90e2;
transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
button:active {
background-color: #2a60b2;
}
- 用
cubic-bezier(0.4, 0, 0.2, 1)比ease更符合按压的物理节奏：先快后慢 - 不要设太长的
transition-duration（比如 >0.4s），否则松手时回退太拖沓，用户会觉得卡顿 - 颜色差值要足够明显，
#4a90e2 → #2a60b2是约30%明度下降，肉眼可辨；若只调opacity会连带影响子元素，不推荐
需要真·长按（hold > 500ms）才触发渐深？必须加JS
比如地图上的标记点，长按2秒才高亮并弹出菜单——这种逻辑纯CSS无法表达。核心是用JS区分“按下”和“长按完成”，再通过类名交由CSS过渡。
关键不是写多复杂，而是避免两个坑：
- 没清除定时器：连续快速点击会累积多个
setTimeout，导致多次触发或内存泄漏 - 没处理 touch/mouse 混合事件：PC端用
mousedown，移动端必须监听touchstart，且要preventDefault()防止滚屏干扰 - 过渡起点必须是初始状态，不能依赖
:active，否则JS加类和伪类样式冲突
最小可用示例：
let holdTimer;
element.addEventListener('touchstart', startHold);
element.addEventListener('mousedown', startHold);
<p>function startHold(e) {
e.preventDefault();
holdTimer = setTimeout(() => {
element.classList.add('held');
}, 500);
}</p><p>element.addEventListener('touchend', clearHold);
element.addEventListener('mouseup', clearHold);
element.addEventListener('mouseleave', clearHold);</p><p>function clearHold() {
clearTimeout(holdTimer);
element.classList.remove('held');
}</p>
CSS里只管过渡：
.my-element {
background-color: #e0e0e0;
transition: background-color 0.3s ease;
}
.my-element.held {
background-color: #9e9e9e;
}
为什么不用 pointer-events: none 或 user-select: none？
这两个常被误认为能“辅助长按”，其实完全无关：pointer-events: none 会让元素彻底失活，:active 失效，JS事件也不触发；user-select: none 只防文字选中，对长按无任何影响。
真正要注意的是 touch-action：
-
touch-action: manipulation能让iOS Safari更快响应touchstart，减少300ms延迟 - 但若元素内含可滚动区域（如列表），设成
manipulation会禁用内部滚动，得改用touch-action: pan-y - 别在父容器上盲目加
touch-action: none，这会直接废掉所有触摸事件
长按渐深看着简单，真正卡住人的永远是事件时机和平台差异。把 :active 当“瞬时反馈”用，把JS当“状态管理”用，边界划清了，反而不容易乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
