Why is the hover state not working when I am using sibling selector to select element?

Question

I am using sibling selector to select another element to style when one element is hovered. But its not working

SCSS code

&__rating-num {
    cursor: pointer;
    background-color: var(--color-dark-blue);
    border-radius: 50%;

    &--2:hover ~ &--1,
    &--2:active ~ &--1 {
      background-color: var(--color-medium-grey);
      color: var(--color-white);
    }

    &:first-of-type {
      padding: 1.2rem 2.1rem;
    }

    &:not(:first-of-type) {
      padding: 1.2rem 1.9rem;
    }
  }

HTML code

<div class="card__footer">
  <div class="card__rating u-mbm">
    <span class="card__rating-num card__rating-num--1">1</span>
    <span class="card__rating-num card__rating-num--2">2</span>
    <span class="card__rating-num card__rating-num--3">3</span>
    <span class="card__rating-num card__rating-num--4">4</span>
    <span class="card__rating-num card__rating-num--5">5</span>
  </div>
  <a href="#" class="btn">Submit</a>
</div>