Question

我的页面上有很多引导卡。当我将鼠标悬停在卡片上时，我希望图标颜色是白色而不是黑色。我尝试了不同的方法，但无法成功。我添加了一个.fa-calendar：hover之类的类，我尝试使用fa：hover但无法成功

这是我的Codepen

<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

更具体地说，您可以将鼠标悬停在类名称上。您需要悬停属性，然后添加类名。

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

Answer 2

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

示例：

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

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

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

Answer 3

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

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

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

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

这里是updated Pen link

悬停时如何更改卡片内字体真棒图标的颜色？

3 个答案: