Html 悬停时如何更改非方形img链接的颜色

我是网络开发新手， 我的目标是：当鼠标悬停在社交媒体链接img上时，它应该像普通文本链接一样改变颜色，但我得到的是框背景和我在img下指定的颜色，我的img链接不是框，它们像twitter instgram徽标等问题我如何将img自身颜色更改为任何处于悬停状态的人，并使其像img边框一样，而不是圆形或长方体，为了更好地理解，我将图片包含在悬停状态，推特的img链接默认为黑色

• 我相信你不能使用图像
• 将其作为SVG包含，并使用CSS填充样式

示例

svg{
填充物：红色；
}
svg：悬停{
填充：蓝色；
}
svg[role=“img”]{
宽度：25px；
}
img{
宽度：30px；
颜色：红色；
填充：紫色；
}

Facebook图标

由于我的声誉，我无法发表评论，因此我将创建一个新的答案，而不是补充nobody先生的答案

像先生一样，没有人说使用svg更容易

但是，如果您必须使用图像，则可以使用CSS

filter

属性以及

brightness（）

或

invert（）

等值来操纵图像的颜色

我喜欢用一个黑色图标把它变成白色

例如：

img{
宽度：40px；
过滤器：反转（1）；
}
身体{
背景：蓝色；
}

是的，它成功了。我想我必须为svg元素编写路径，然后我会把头发剪掉，因为我是新手，我从great下载了svg图标免费的。请随便问我任何问题！祝你好运