根本原因是浏览器对label默认样式变更未启用过渡动画，必须显式声明transition且限定属性，推荐color、background、box-shadow等关键属性分别设置0.2s ease过渡。
为什么 :hover + label 交互看起来“卡顿”
根本原因不是选择器本身，而是浏览器默认对 label 的样式变更（比如颜色、背景、边框）没有启用过渡动画。哪怕你只改了一个 color，只要没声明 transition，变化就是瞬间完成的，人眼感知为“跳变”。另外，若 label 内含图标或伪元素（如 ::before），而这些部分没被 transition 覆盖，也会加剧割裂感。
必须加 transition 且限定作用属性
直接在 label 上写过渡，但别用 transition: all .2s——它会拖慢渲染，还可能意外过渡到不想动的属性（比如 font-size 或 display）。推荐明确列出要动的项：
label {
color: #333;
background: #f9f9f9;
padding: 8px 12px;
border-radius: 4px;
transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
input:hover + label {
color: #007bff;
background: #eef5ff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}
-
ease比linear更符合操作直觉，起始稍缓、中间快、结尾收住 - 如果只改颜色，就只写
color .2s；加了阴影就补上box-shadow，避免漏项导致部分变化仍生硬 - 时间值建议控制在
.15s–.25s：短于.1s不易察觉，长于.3s显滞后
注意兄弟选择器的触发边界与重绘范围
:hover + label 依赖 input 是 label 的前一个兄弟节点，且两者同级。常见坑：
- 中间插入注释、空格文本节点或其它元素，
+就失效——检查 DOM 是否干净 -
input若设了display: none，hover 依然有效，但部分旧版 Safari 对隐藏 input 的 hover 支持不稳定，可改用opacity: 0; position: absolute;隐藏更稳妥 - 过渡属性若涉及
transform或opacity，浏览器会开启 GPU 加速，比background或color更顺滑；但label通常不需 transform，优先保语义和可访问性
移动端需要额外处理 :hover 的不可靠性
真机上 :hover 可能不触发，或触发后不自动取消（尤其 iOS Safari）。不能只靠它做核心交互：
- 把关键状态也绑定到
:focus和:checked（如果是 checkbox/radio），例如：input:focus + label, input:checked + label { ... } - 避免仅用
:hover控制表单必填提示或错误高亮——这些必须有 JS fallback 或原生表单验证配合 - 测试时真机连点几次，确认状态不会“粘住”；必要时用
@media (hover: hover)区分悬停能力
平滑不是加个 transition 就完事，关键是选对属性、控好时机、兜住边界。很多“不平滑”其实是状态没对齐，或者过渡漏了某一块视觉反馈。
