[英]How to change color of a font-awesome icon inside a card on hover?
I have a page with a lot of bootstrap cards. 我的页面上有很多引导卡。 When I hover on the card, I want the icon color to be white rather than black.
当我将鼠标悬停在卡片上时,我希望图标颜色是白色而不是黑色。 I tried different methods but I couldn't succeed.
我尝试了不同的方法,但无法成功。 I added a class like .fa-calendar:hover, I tried with fa:hover but couldn't succeed
我添加了一个类似.fa-calendar:hover的类,我尝试使用fa:hover但无法成功
These is my codepen 这是我的codepen
https://codepen.io/anon/pen/EGOgMq 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>
To be more specific you can hover over the class name. 更具体地说,您可以将鼠标悬停在类名称上。 You need hover property and after that add the class name.
您需要悬停属性,然后添加类名。
.wrap:hover .fa{
color:#FFF;
}
If you want the color of all the icon to be same on hover then you can use the class name 如果您希望所有图标的颜色在悬停时都相同,则可以使用类名
Example: 例:
.wrap:hover .fa{
color:red;
}
Else you can use id and then change the color 否则,您可以使用id然后更改颜色
.wrap:hover #vol{
color:red;
}
This is because of the color you set for .mbr-iconfont
这是因为您为
.mbr-iconfont
设置了颜色
.mbr-iconfont {
font-size: 4.5rem !important;
color: #313131;
margin: 1rem;
padding-right: 1rem;
}
when you hover over each box, the main parent element which gets :hover is the .wrap
class. 当您将鼠标悬停在每个框上时,获得的主要父元素是
.wrap
类。 you can't change color of .mbr-iconfont:hover
because the user may hover on other parts of the box (eg. the text or title or margins...). 您不能更改
.mbr-iconfont:hover
颜色,因为用户可能将鼠标悬停在框的其他部分(例如,文本或标题或边距...)。 So, you have to set your hover style for parent element .wrap
as in following: 因此,您必须为父元素
.wrap
设置悬浮样式,如下所示:
.wrap:hover .mbr-iconfont {
color: #FFF;
}
Here is the updated Pen link 这是更新的笔链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.