如何改变颜色的字体-令人敬畏的图标内卡悬停？

Question

我有一页有很多引导卡。当我悬停在卡片上时，我希望图标颜色是白色的而不是黑色的。我尝试过不同的方法，但我没能成功。我添加了一个类，如.fa-日历:悬停，我尝试使用fa:抑扬，但没有成功

这是我的密码

https://codepen.io/anon/pen/EGOgMq

<section>
<div class="container">


        <div class="row mbr-justify-content-center">

            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-volume-up fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Stay <span>Successful</span></h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-calendar fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Create
                            <span>An Effective Team</span>
                        </h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-globe fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Launch
                            <span>A Unique Project</span>
                        </h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mbr-col-md-10">
                <div class="wrap">
                  <a href="#"></a>
                    <div class="ico-wrap">
                        <span class="mbr-iconfont fa-trophy fa"></span>
                    </div>
                    <div class="text-wrap vcenter">
                        <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Achieve <span>Your Targets</span></h2>
                        <p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
                    </div>
                </div>
            </div>




        </div>

</div>

</section>

Answer 1

这是因为您为.mbr-iconfont设置的颜色

.mbr-iconfont {
  font-size: 4.5rem !important;
  color: #313131;
  margin: 1rem;
  padding-right: 1rem;
}

当您在每个框上悬停时，获取：.wrap类的主父元素。您不能更改.mbr-iconfont:hover的颜色，因为用户可以悬停在框的其他部分(例如。文本或标题或页边距.)。因此，必须为父元素.wrap设置悬停样式，如下所示：

.wrap:hover .mbr-iconfont {
  color: #FFF;
}

这是更新钢笔链接

Answer 2

更确切地说，您可以悬停在类名上。您需要“悬停”属性，然后添加类名。

.wrap:hover .fa{
 color:#FFF;
}

Answer 3

如果您希望所有图标的颜色在悬停时相同，则可以使用类名。

示例：

.wrap:hover .fa{
  color:red;
  }

否则您可以使用id，然后更改颜色。

.wrap:hover #vol{
  color:red;
  }