根本原因是浏览器对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 的前一个兄弟节点，且两者同级。常见坑：
