悬停时如何更改不是方形的img链接的颜色

Question

我是网络开发的新手，我的目标是：当悬停在社交媒体上时 link img 它应该像普通文本一样改变颜色 link 会 但是我得到的框背景颜色是我在下面指定的img 和我的 img links 不是盒子，它们就像 twitter instgram 徽标等...，问题我如何制作 img 它自己的颜色可以更改给任何人在悬停状态下，就像 img 边框不是圆形或框一样，为了更多理解，我在悬停状态下包含了图片，推特的 img link 默认为黑色。

Answer 1

我相信你不能使用图像。
将其包含为 SVG，并使用 CSS-fill.

例子

svg {
  fill: red;
}
svg:hover {
  fill: blue;
}
svg[role="img"]{
  width:25px;
}
img {
  width: 30px;
  color: red;
  fill:purple;
}

<body>
  <svg role="img" fill="purple" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <title>Facebook icon</title>
    <path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" />
  </svg>

  <img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/facebook.svg" />

</body>

从 simpleicons.org

免费获取 SVG 社交媒体图标

Answer 2

由于我的声誉，我无法发表评论，所以我不会补充没有人的回答，而是创建一个新的回答。

就像没有人说使用 svg 更容易

但如果您绝对必须使用图像，则可以使用 CSS filter 属性等值，例如 brightness() 或 invert() 来操纵它的颜色。

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

示例：

<img src="https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/facebook.svg" />

<img src="https://image.flaticon.com/icons/svg/62/62945.svg" />

<img src="https://image.flaticon.com/icons/svg/62/62945.svg" />

<img src="https://bradan.co/wp-content/uploads/2017/05/icon-blue-website-design-development.png" />

img {
    width: 40px;
    filter: invert(1);
}

body {
    background: blue;
}

悬停时如何更改不是方形的img链接的颜色

how to change color of img links which are not square shape when hovering

html

css

image

hover