Css 如何改变图标的 colored颜色时悬停在

发布于03月27日

我应该添加什么代码来使图标改变 colored颜色，或者当鼠标悬停在上面时，变成不同 colored颜色的图标图像？

i.pk-social-links-icon.pk-icon.pk-icon-twitter {
    content: url(yourimageurl.png) !important;
    width: 100px;
}

推荐答案

由于您没有SVG或基于字体的图标，您需要应用过滤器(考虑到它是真正的PNG，没有背景). 我建议你使用这个website(它将十六进制 colored颜色转换为过滤器样式).

对于hover，你需要在结尾添加相同的样式名，并在里面放置过滤器.(或者任何你想让它做的视觉效果)，在这种情况下，我添加了一个滤镜，使这种 colored颜色 #de0d0d(有点红).

i.pk-social-links-icon.pk-icon.pk-icon-twitter {
    content: url(yourimageurl.png) !important;
    width: 100px;
}
i.pk-social-links-icon.pk-icon.pk-icon-twitter:hover {
    filter: brightness(0) saturate(100%) invert(17%) sepia(44%) saturate(6167%) hue-rotate(356deg) brightness(103%) contrast(98%);
}