Less中应使用参数化Mixin封装hover：.hover-effect(@rules) { &:hover { @rules(); } }，避免硬编码；transition需配对transform并限定property；移动端用:active或@media (hover: hover)降级。
Less里怎么写hover效果才不重复写选择器
直接用Mixin封装:hover规则，避免每个组件都复制粘贴同一套伪类结构。不然改个颜色或过渡时长，得全局搜:hover手动替换，漏一个就出问题。
常见错误是把整个:hover块写死在Mixin里，比如：.hover-effect() { &:hover { color: red; } }——这会导致调用时强制生成&:hover，无法和父选择器组合（如.btn:hover变成.btn &:hover，完全失效）。
正确做法是让Mixin接收状态名和样式，用&:hover相对引用当前作用域：
.hover-effect(@rules) {
&:hover {
@rules();
}
}
.btn {
color: #333;
.hover-effect({
color: #007bff;
transition: color 0.2s;
});
}
transition和transform要一起配对才顺滑
只加transition: color 0.2s，鼠标移入时文字变色有缓动，但移出时可能卡顿——因为浏览器默认没给移出加过渡，得显式声明所有方向。
立即学习“前端免费学习笔记（深入）”；
更稳妥的是用transition-property限定范围，避免意外触发其他属性动画；同时transform类操作（如scale、translateY）必须搭配will-change: transform或硬件加速层，否则低端设备会掉帧。
实操建议：
- 统一用
transition: all 0.2s ease-in-out开头调试，上线前收紧为具体属性 -
transform: scale(1.05)比font-size缩放性能高得多 - 如果用
opacity做淡入，记得加will-change: opacity防闪烁
伪类嵌套太深容易编译失败
Less的&嵌套支持多层，但写成&:hover::before或&:hover span时，若父选择器本身带复杂组合（如.card--featured .card__title），编译后选择器过长，可能触发IE11或旧版Safari的CSS解析上限（4095字符或255选择器层级）。
规避方式：
- Hover交互尽量绑定在最外层元素上，用
color、background等可继承属性影响子元素 - 真需要操作子元素时，拆成独立Mixin：
.hover-child(@selector, @rules) { &:hover @{selector} { @rules(); } } - 用
data-hover属性配合JS切换，把逻辑移出CSS（适合复杂交互动画）
移动端hover根本不会触发，别白费劲
iOS Safari和安卓Chrome在触摸设备上，:hover只在点击后短暂生效（模拟“悬停”），且不保证触发时机。用户手指点一下就走，根本看不到hover效果。
所以不能依赖:hover做核心反馈，比如按钮按下去没视觉变化，用户会以为没点中。
替代方案：
- 用
:active代替:hover写按压态，它在触屏下可靠触发 - 加
@media (hover: hover)媒体查询，只给支持悬停的设备启用hover效果 - 关键操作（如提交按钮）必须提供主动态反馈，比如加
tap-highlight-color: transparent去掉灰底，再用:active给背景变暗
最麻烦的是：有些设计稿标了“悬停放大+文字变色”，开发时得立刻跟产品确认——这个效果在iPad上要不要？要不要降级成点击反馈？不问清楚，联调时才发现没法对齐，就得重写。
