css body：无法停止悬停闪烁后

Question

我的社交图标是黑白的，带有 :hover 伪选择器，可将它们更改为全彩等效项，从而导致预期的闪烁，这些图标的代码如下：

.header-main-socials {
  width: fit-content;
  height: 100%;
  padding-right: 60px;
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.socials_icons {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}
#fb_icon { 
  background-image: url(../images/social-icons/facebook-bw.png);
}
#fb_icon:hover { 
  background-image: url(../images/social-icons/facebook.png);
}
#ig_icon { 
  background-image: url(../images/social-icons/instagram-bw.png);
}
#ig_icon:hover { 
  background-image: url(../images/social-icons/instagram.png);
}

我尝试使用 body:after 停止闪烁，然后添加然后隐藏要预加载的内容，但是闪烁仍然存在，如果我删除代码来隐藏内容，它仍然不会显示。按住 Ctrl 键单击 url 链接会将我带到正确的图像，并且我确信路径是正确的。我尝试过在 url 括号内使用或不使用引号，但没有成功。我做错了什么？

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(48, 48, 48);
}
body:after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(../images/social-icons/facebook.png) url(../images/social-icons/instagram.png);
}

编辑：不确定它是否与这样的任务相关，但我正在使用重置样式表，它相当长，所以我将提供指向它的 github 的链接，而不是复制粘贴整个内容：https://github。 com/elad2412/the-new-css-reset

Answer 1

我建议您只使用彩色图像并使用

filter: grayscale(1);

举个例子：

#fb_icon { 
    background-image: url(../images/social-icons/instagram-bw.png);
    filter: grayscale(1); 
}

#fb_icon:hover {
    filter: grayscale(0); 
}