这个问题很基本,但我想确定没有比我现在做的替代方法。假设我有一个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;
}
<div class="social-icon" id="facebook-icon"></div>
答案 0 :(得分:0)
如果您使用Font Awesome Facebook icon,则可以change of the color of it in the CSS那样。
#facebook-icon {
color: grey;
}
#facebook-icon:hover {
color: blue;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
试试这个:
#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>