Question

我正在尝试创建一个网站，但我位于页脚。我想在页面底部添加“关注我们”功能，并将徽标悬停在徽标上方时，它们会变为绿色。但是出于某种原因，当我这样做时，它什么也没做。这是提取的代码：

    <div class="footer">
            <footer>
                <h2>Follow Us</h2>
                <a href="https://facebook.com"><img src="img/facebook.svg" alt="facebook" class="facebook"></a>
            </footer>
        </div>

.facebook{
    width: 2%;
}

.facebook:hover{
    color: var(--aa-color);
}

Answer 1

你能这样吗：）

只需在CSS中添加：hover和：focus（移动版本）即可更改图标的颜色。

.fa.fa-facebook:hover,.fa.fa-facebook:focus{
   color: var(--aa-color);
}

body{
   --aa-color: green;
} 
.fa.fa-facebook{
  font-size:48px;
}

.fa.fa-facebook:hover,.fa.fa-facebook:focus{
   color: var(--aa-color);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
  <footer>
    <h2>Follow Us</h2>
    <a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
  </footer>
</div>

如果您通过使用填充属性

添加svg图像以更改颜色

.facebook:hover,.facebook:focus{
  fill: var(--aa-color);
}

body{
   --aa-color: green;
} 
.facebook{
  width:15%;
}

.facebook:hover,.facebook:focus{
  fill: var(--aa-color);
}

<div class="footer">
    <footer>
        <h2>Follow Us</h2>
        <a href="https://facebook.com">
          <svg version="1.1" class="facebook" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 310 310" style="enable-background: new 0 0 310 310;" xml:space="preserve">
            <g id="XMLID_834_">
                <path
                    id="XMLID_835_"
                    d="M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064   c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996   V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545   C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703   c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z"
                />
            </g>
        </svg>
        </a>
    </footer>
</div>

Answer 2

所以，我想出了答案。如果下载该图标，它将变成SVG图像，并且无法更改颜色。我必须将真棒字体套件连接到我的代码，才能正确使用图标。谢谢您的所有帮助?。

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

2 个答案: