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