целеуказание двух правил одновременно с использованием 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> 

правило дерзости: .cta-BTN, .fa-шеврон круг правого { &: парить { цвет: $ 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; 
    } 
} 

Не уверен, что важный ... оставили его, как вы! может понадобиться по какой-то причине.