在悬停时更改图像颜色而无需更改图像答案

【问题标题】：Changing image color on hover without having to change the image在悬停时更改图像颜色而无需更改图像
【发布时间】：2018-04-26 22:00:51
【问题描述】：

这个问题非常基本，但我想确定没有比我目前所做的替代方法。假设我有一个 Facebook 图标。到目前为止，当用户将鼠标悬停在该图像上时，我会显示不同的图像以更改颜色。是否有替代 CSS 方法来执行此操作，所以我不使用多个图像？

在下面的小提琴中，我尝试更改背景，但这只是覆盖了整个图像。

.social-icon {
    width: 20px;
    height: 20px;
    transition: ease .3s;
    -webkit-transition: ease .3s;
    margin-right: 5px;
    cursor: pointer;
}
#facebook-icon {
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);
    background-size: 20px 20px;
}
#facebook-icon:hover {
  background: #FFF;
}

&lt;div class="social-icon" id="facebook-icon"&gt;&lt;/div&gt;

jsFiddle

【问题讨论】：

您可以考虑使用 SVG 图像并更改节点颜色。
@PraveenKumar 刚刚尝试过这种方法，但无法让它发挥作用。 jsfiddle.net/n1vn8bho/7
看到这个：stackoverflow.com/questions/7273927/…
@Balwant 添加灰度并不能真正帮助解决我的问题。如果我能够使用可以工作的过滤器应用正常的颜色变化。
如果您使用其他彩色图像作为源，然后在未悬停时将其灰度化？

标签： html css

【解决方案1】：

如果你使用Font Awesome Facebook icon，你可以这样change of the color of it in the CSS。

#facebook-icon {
  color: grey;
}

#facebook-icon:hover {
  color: blue;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social-icon" id="facebook-icon"><i class="fa fa-facebook"></i></div>

【讨论】：

感谢您的建议。我希望以一种有效的方式做到这一点（不必提出外部请求）。

【解决方案2】：

试试这个：

#facebook-icon:hover {
    background-color: blue;
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);  
}

.social-icon {
    width: 20px;
    height: 20px;
    transition: ease .3s;
    -webkit-transition: ease .3s;        
    margin-right: 5px;
    cursor: pointer;
}

#facebook-icon {
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);
    background-size: 20px 20px;
}

#facebook-icon:hover {
    background-color: blue;
    background-image: url(https://s3.us-east-2.amazonaws.com/optimumdesigns/facebook-logo-gray.png);  
}

&lt;div class="social-icon" id="facebook-icon"&gt;&lt;/div&gt;

【讨论】：

似乎是覆盖问题。
我把你的代码放到了一个 sn-p 中，但我不确定这是他们想要的效果。