Значок огня при наведении

Question

я пытаюсь запустить класс при наведении на кнопку, в основном внутри моего href у меня есть значок тега ai, который должен изменить цвет: но не работает:

мои css и html:

.catalog-icons i:hover{
   color: #ba658a;
}

.catalog-icons .btn-icon:hover ~.catalog-icons i:hover{
    color:#ba658a;
    background-color: white;
}

<li class="list-inline-item">
  <a class="btn btn-icon" href="">
    <i class="fontello-icon icon-vet"></i>
  </a>
</li>

Answer 1

Я добавил изображение, так как ваш код не предоставляет никакого.Ваше правило должно быть простым:

.your_hovered_element_class:hover affected_elemnt_inside

в вашем случае после наведения .btn-icon вы меняете i цвет фона

.btn-icon:hover i{
  background-color: #ba658a;
}

i img {
  height: 1em;
}

<li class="list-inline-item">
  <a class="btn btn-icon" href="">link text
    <i class="fontello-icon icon-vet"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-person-outline-128.png" /></i>
  </a>
</li>