如何更改鼠标悬停时图标的颜色

Question

我需要添加什么代码才能使图标改变颜色，或者当鼠标悬停在图标上时更改为不同颜色的图标图像？

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

Answer 1

由于您没有 SVG 或基于字体的图标，因此您需要应用过滤器（考虑到它是真正的 PNG 并且没有背景）。 我建议您使用这个网站（它将十六进制颜色转换为过滤器样式）。

对于悬停，您需要添加相同的样式名称，并在末尾添加“：hover”，并在其中放置过滤器。 （或者任何你想要它做的视觉效果），在这种情况下，我放置了一个过滤器，使这种颜色#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%);
}