悬停时更改图像颜色而不必更改图像

Question

这个问题很基本，但是我想确定没有比我现在做的更好的方法了。假设我有一个脸书图标。到目前为止，当用户悬停在该图像上时，我会显示不同的图像以更改颜色。有没有一种替代的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;
}

<div class="social-icon" id="facebook-icon"></div>

JSFIDLE

Answer 1

试试这个：

#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);  
}

<div class="social-icon" id="facebook-icon"></div>

Answer 2

如果你使用字体真棒Facebook图标，你可以改变它的颜色在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>