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

乌巴达·阿巴斯

我是 Web 开发的新手,我的目标是:当悬停在社交媒体链接 img 上时,它应该像普通文本链接一样改变颜色,但我得到的是我在 img 下指定的颜色的框背景,而我的 img 链接不是框它们就像 twitter instgram 徽标等......,问题我如何使 img 它自己的颜色变为悬停状态的任何人,并像 img 边框一样不是圆形或框,为了更多的理解,我在悬停状态包含了图片Twitter 的 img 链接默认为黑色。

推特的图像活动悬停状态

用户13637469
  • 我相信你不能使用图像。
  • 将其包含为 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 中的社交媒体图标

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章