css парить, не применяя в коде

Question

после обучения от udemy я, кажется, делаю все по видео, но оно не работает. у меня есть значок твиттера svg. это содержит птицу щебета и круг вокруг этого. то, что должно произойти при наведении, это то, что круг исчезает с помощью наведения и преобразования со свойством scale, но он не исчезнет. Кто-нибудь знает, что не так?

https://codepen.io/cole-pratt/pen/poJJdzy?editors=1100

.twitter-icon-group:hover {
  .twitter-outline {
    transform: scale(0);
  }
}

Answer 1

Вы пишете SASS, но панель CSS не обрабатывает ее как таковую. В codepen на панели css выберите шестеренку и выберите «S CSS» для препроцессора CSS. Тогда все работает как надо.

Answer 2

Это просто проблема иерархии того, как вы масштабируете фактический контур. Вместо того, чтобы просто помещать его в круглые скобки, это правильный синтаксис.

.twitter-icon-group:hover > .twitter-outline {
   transform: scale(0);                                                                
}

Его проще представить как «объект, который вы хотите наблюдать»: hover> «на что вы хотите повлиять» {«на что вы хочу случиться '}.