在悬停时更改图像颜色而无需更改图像
Posted
技术标签:
【中文标题】在悬停时更改图像颜色而无需更改图像【英文标题】: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;
<div class="social-icon" id="facebook-icon"></div>
jsFiddle
【问题讨论】:
您可以考虑使用 SVG 图像并更改节点颜色。 @PraveenKumar 刚刚尝试过这种方法,但无法让它发挥作用。 jsfiddle.net/n1vn8bho/7 看到这个:***.com/questions/7273927/… @Balwant 添加灰度并不能真正帮助解决我的问题。如果我能够使用可以工作的过滤器应用正常的颜色变化。 如果您使用其他彩色图像作为源,然后在未悬停时将其灰度化? 【参考方案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);
<div class="social-icon" id="facebook-icon"></div>
【讨论】:
似乎是覆盖问题。 我把你的代码放到了一个 sn-p 中,但我不确定这是他们想要的效果。以上是关于在悬停时更改图像颜色而无需更改图像的主要内容,如果未能解决你的问题,请参考以下文章