如何为现有CSS社交图标添加悬停变色或切换图片的代码？

下面提供两种实用的实现方式，根据你的需求选择即可：

方式一：切换为另一张不同颜色的图标图片 #

利用CSS的:hover伪类，在鼠标悬停时替换图标资源，还可以添加过渡动画让切换更流畅：

i.pk-social-links-icon.pk-icon.pk-icon-twitter {
    content: url(yourimageurl.png) !important;
    width: 100px;
    /* 可选：添加过渡动画，让切换效果更平滑 */
    transition: all 0.3s ease;
}

/* 鼠标悬停时替换为目标图片 */
i.pk-social-links-icon.pk-icon.pk-icon-twitter:hover {
    content: url(yourhoverimageurl.png) !important;
}

方式二：通过滤镜直接修改图标颜色（适合单色图标） #

如果你的图标是单色PNG（比如白色、黑色），不需要额外准备图片，用filter属性就能直接调整颜色：

i.pk-social-links-icon.pk-icon.pk-icon-twitter {
    content: url(yourimageurl.png) !important;
    width: 100px;
    /* 示例：将原图标转为白色（根据实际原图颜色调整参数） */
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(7473%) hue-rotate(180deg) brightness(105%) contrast(101%);
    /* 添加过渡动画，让颜色变化更自然 */
    transition: filter 0.3s ease;
}

/* 鼠标悬停时转为蓝色（可根据需求调整滤镜参数得到目标颜色） */
i.pk-social-links-icon.pk-icon.pk-icon-twitter:hover {
    filter: brightness(0) saturate(100%) invert(33%) sepia(90%) saturate(2000%) hue-rotate(200deg) brightness(90%) contrast(90%);
}

你可以根据实际需求调整滤镜参数，匹配想要的悬停颜色效果。

内容的提问来源于stack exchange，提问作者user23840875