Почему такое зависание в s css и bootstrap не работает?

Question

У меня есть следующий Boostrap HTML:

      <div class="d-flex mx-2 ml-auto">
        <a href="#">
          <%= inline_svg_tag("icons/interface/heart.svg", alt: "like", class: "icon icon-lg bg-danger heart-like-icon") %>
        </a>
      </div>

Это генерирует следующее HTML:

<a href="#">
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="icon icon-lg bg-danger heart-like-icon">
<path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
   </svg>    
</a>

Вышеупомянутое находится в моем articles/show.html.erb.

В моем articles.scss у меня есть следующее:

.heart-like-icon {
  &:hover {
    opacity: 0.5;
  }
}

heart.svg отображается нормально, но когда я нахожу на значок, он не меняет прозрачность и когда я проверяю элемент заказ в моей консоли разработчика Я не вижу в списке стиль heart-like-icon:hover.

Как мне это исправить?

Answer 1

Удалите значок .heart-like и замените «&» на «a». ваш код css должен быть только таким:

  a:hover {
     opacity: 0.5;
  }

Рабочий пример: https://jsfiddle.net/uaL4nxd3/2/