使用sass同时针对两个规则

Question

我在CTA按钮的文本旁边有一个圆圈+箭头，我希望当它们悬停在其中任何一个上时同时改变颜色。现在，当悬停在文本上时，箭头不会改变颜色，不知道如何编写：

<div class="cta-div">
  <a class="cta-btn" href="#" role="button">SAVE NOW&nbsp;<i class="fa fa- 
  chevron-circle-right " style="font-size:34px;color:#efd43d; vertical
  -align:middle; padding:0 0 3px;"></i></a>
</div>

sass规则：     .cta-btn，.fa-chevron-circle-right {         ＆amp ;:hover {         颜色：$ btn-bkg-hover-color！important;         }     }

我已经设置了这个并且在小提琴中工作：https://jsfiddle.net/roob/9Lsjstf7/1/ 任何帮助表示赞赏。如果这是重复的帖子，请发布链接。

Answer 1

你不会单独悬停在它们上面 - 你只是悬停在锚点上，当你这样做时，你也会将孩子盘旋：

.cta-btn:hover,  {
  color: #e8e2bb !important;
  .fa-chevron-circle-right {
    color: #e8e2bb !important;
  }
}

不确定！important ...因为某些原因你可能需要它。