roob roob - 23 days ago 8
Sass (Sass) Question

targetting two rules at the same time using sass

I have a circle+arrow next to a text in a CTA button and i'd like both to change color at the same time when hovering over either of them. Right now when hovering over the text the arrow does not change color, not sure how to write the :

<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 rule:
.cta-btn, .fa-chevron-circle-right {
&:hover {
color: $btn-bkg-hover-color !important;
}
}

I have set this up and working in a fiddle: https://jsfiddle.net/roob/9Lsjstf7/1/
Any help is appreciated. If this is a duplicate post then please post a link.

Answer

You do not hover on them separately - you just hover on the anchor and when you do that you also hover the child so:

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

Not sure about the !important ... left it as you may need it for some reason.

Comments