在 SCSS 中，需用嵌套语法 &:hover 明确作用域，再在内部选择子元素（如 .block__title），才能正确编译为 .block:hover .block__title，从而实现悬停父级时样式联动。

在 scss 中，需用嵌套语法 `&:hover` 明确作用域，再在内部选择子元素（如 `.block__title`），才能正确编译为 `.block:hover .block__title`，从而实现悬停父级时样式联动。

SCSS 的嵌套规则中，& 代表父选择器，但其拼接逻辑是字符串连接而非语义化作用域绑定。因此，你写的这段代码：

.block:hover {
  &__title {
    text-decoration: underline;  
  }
}

会被编译为 .block:hover__title（即一个名为 hover__title 的类），而非预期的 .block:hover .block__title —— 这正是样式失效的根本原因。

✅ 正确写法是：先定义父容器，再用 &:hover 声明悬停状态，并在其嵌套块内显式写出子元素选择器：

.block {
  &:hover {
    .block__title {
      text-decoration: underline;
    }
    .block__text {
      color: #2c3e50;
      font-weight: 600;
    }
    .block__link {
      color: #3498db;
      transition: color 0.2s ease;
    }
  }
}

编译后生成的标准 CSS 为：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.block:hover .block__title {
  text-decoration: underline;
}
.block:hover .block__text {
  color: #2c3e50;
  font-weight: 600;
}
.block:hover .block__link {
  color: #3498db;
  transition: color 0.2s ease;
}

⚠️ 注意事项：

• 不要省略子元素的完整类名（如 .block__title），仅用 &__title 会错误拼接；
• 若使用 BEM 命名规范，推荐保持结构清晰，避免过度依赖嵌套——过深嵌套（如 &:hover .block__content .block__item）会降低可维护性；
• 需搭配 transition 属性提升交互体验，尤其对颜色、不透明度等可动画属性；
• 在 Vue/React 等框架中，若子元素是动态渲染或条件显示，需确保 DOM 存在后再触发悬停效果。

掌握这一模式后，你还能轻松扩展为多级联动（例如悬停 .block 时同时激活 .block__image::before 伪元素），让组件交互更专业、更可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！