html - 悬停时的火图标

Question

我试图在将鼠标悬停在按钮上时触发一个类，基本上在我的 href 内部我有一个 i 图标标签需要更改颜色:但不起作用:

我的 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>