SCSS中多层:hover嵌套可行但需避免循环触发，应以根元素.card:hover为主状态控制子元素变化，子元素独立悬停需设pointer-events:none防闪退，嵌套不超过3层，transition统一写在根元素上，移动端用@media(hover:hover)隔离或改用:active/JS模拟。
SCSS里怎么写多层:hover嵌套才不炸锅
直接在SCSS中用 &:hover 嵌套子元素悬停逻辑，是可行的，但容易写出「悬停A时B动、悬停B时A又动」的循环触发或样式覆盖混乱。关键不是能不能嵌，而是谁该响应、谁该隔离。
- 卡片整体
.card:hover控制基础浮起和阴影，这是主状态，所有子元素变化都应基于它，而不是各自独立:hover - 子元素（如按钮、图片）若需独立悬停反馈，必须加
pointer-events: none到父卡片上——否则鼠标移入子元素会先触发父级:hover退出，造成闪退 - SCSS嵌套层级建议不超过3层：
.card { &:hover { .card-img { transform: scale(1.03); } } }，再深就该抽成单独选择器或用BEM命名解耦
为什么 &:hover .btn 在SCSS里有时不生效
常见现象：编译后CSS里生成了 .card:hover .btn，但鼠标悬停卡片时按钮没变色。根本原因不是语法错，而是CSS特异性（specificity）被更高权重的选择器干掉了。
- 检查是否全局写了
button { background: #ccc !important; }这类强覆盖规则 - Tailwind用户尤其注意：
hover:bg-blue-600编译后是.card:hover .btn.bg-blue-600，若你手动写的.card:hover .btn没带具体属性（比如没写background-color），它压根不会覆盖Tailwind的声明 - 调试技巧：浏览器开发者工具里看「Computed」面板，点开对应属性，看哪条规则被划掉、被哪条覆盖
transition 属性该写在哪儿：根元素还是子元素
写在根元素（.card）上最稳。如果把 transition: transform 0.2s 写在 .card-img 上，而悬停触发的是 .card:hover .card-img，动画依然能跑，但一旦卡片有多个可变元素（图片、标题、按钮），维护成本陡增。
- 推荐统一写在根选择器：
.card { transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s ease; } - 子元素若需不同缓动节奏（比如文字淡入比卡片浮起慢0.1s），用
transition-delay，别拆开写多个transition - 绝对避免
transition: all 0.3s—— 它会让未预期的属性（如border-color）也参与过渡，拖慢渲染
移动端 hover 效果失效的硬伤怎么绕
CSS :hover 在iOS Safari和多数安卓Chrome里，首次点击会触发一次，之后就不响应了——这不是bug，是规范行为。真要兼容，得换思路。
- 不用
:hover，改用:active+transition：点击瞬间触发浮起，松手自动回落，体验接近 - 对需要持续悬停态的场景（比如显示隐藏按钮），加JS监听
touchstart并切换一个.is-hovered类，CSS里写.card.is-hovered .card-link { opacity: 1; } - SCSS里可用
@media (hover: hover) and (pointer: fine)包一层真正的:hover规则，让触屏设备直接跳过，只对鼠标设备生效
真实项目里最常被忽略的，是悬停热区连续性：卡片之间留白太小，鼠标从一张移到另一张时经过空白区域，:hover 状态会中断。解决方法不是加 margin，而是给容器加 display: flex; gap: 16px;，gap 是「不可见但可悬停」的安全间隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
