[英]Change Font Awesome's icon color with hover
我刚刚开始编程,我需要一些帮助。
我使用的是Font Awesome图标,并且悬停时尝试更改它的颜色,但不知道为什么它不起作用。 我在这里寻找其他遇到相同问题的人,尝试了解决方法,但仍然无法正常工作:(
这是我的HTML代码的一部分:
<footer>
<div class="row container">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-5">
<a href="www.facebook.com"><i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i></a>
<a href="www.vimeo.com"><i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i></a>
</div>
</div>
</footer>
这是我所有页脚的CSS:
footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}
footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}
.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
}
.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}
.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw);
@include screen-above(800px) {
font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff;
}
.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw);
@include screen-above(800px) {
font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}
.fa-facebook {
padding-right: 20px;
}
.fa-facebook:hover {
color: #57cdf7;
}
我会很高兴提出任何建议,我尝试了到目前为止所知道的一切,但未能正确解决。
谢谢!
看起来是因为您使用了内联样式。 它始终具有更高的优先级。 另外,您试图在<i>
标记的悬停上更改样式,但是您应该使用<a>
看一看:
a { display: block; } .test1 { color: red; } .test1:hover { color: #57cdf7; } .test2 .fa-facebook:hover { color: #57cdf7; } .test3 .fa-facebook:hover { color: #57cdf7; }
<a href="#" class="test1"> <i class="fa fa-vimeo fa-2x">facebook</i> </a> <a href="#" class="test2"> <i class="fa fa-facebook fa-2x">facebook</i> </a> <a href="#" class="test3"> <i class="fa fa-facebook fa-2x" style="color:green">facebook</i> </a>
我建议为字体真棒按钮的<a>
标签分配一个类,删除内联样式并将其移动到CSS文件中。
因为它是在锚标记中,所以您应该使用锚标记在悬停时编写CSS。 a:hover .fa-facebook { color: #57cdf7}
/* hover state */
a:hover .far, a:hover .fas {
color:white;
}
/* normal state */
li a .far , li a .fas {
color:red;
}
对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.