使用 SCSS 时，如何更改将鼠标悬停在父元素上时子元素的样式？

Question

有一个包含多个嵌套元素的块：

<div class="block">
  <h1 class="block__title"></h1>
  <p class="block__text"></p>
  <a href="" class="block__link"></a>
</div>

我使用此代码，但它不起作用：

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

Answer 1

您当前的代码被解释为

.block:hover__title

，这不会产生您想要的效果。

要让您的子元素对悬停做出反应，您可能需要执行以下操作：

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

（编译为

.block:hover .block__title

这将正确影响子元素）