How do I change the styles of child elements when hovering over the parent when using SCSS?

Question

There is a block with several nested elements:

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

I use this code, but it doesn't work:

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

Answer 1

Your current code is being interpreted as .block:hover__title which will not produce your desired effect.

To get your child element reacting to a hover you'll probably want to do something like:

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

(compiles as .block:hover .block__title which will correctly affect the child element)