Javascript 为什么在第一次加载时将css反向悬停在图像上不能正确加载？

加载页面后，我们使用一个大图像作为div的背景，如果我们在该div上悬停几秒钟，我们会变为空白，为什么？我们能找到解决办法吗？我需要一个不使用精灵图像的解决方案，因为我需要以响应的方式更改该图像

.hexagon{
背景：url（/images/service bg.jpg）不重复；
}
.六边形：悬停{
背景：url（/images/service bg over.jpg）不重复；
}

测试1
测试1

因为此图像很大，加载它需要时间，这就是为什么在悬停元素时会出现几秒钟空白。
为了修复它，您必须在悬停时预加载所需的图像。有一些方法可以做到这一点，JS解决方案的评论中也有一些建议，但我认为使用CSS方法更合适，因为您不需要JS部分。
为了使用CSS预加载图像，可以将主体的after伪元素的内容设置为这些图像，然后隐藏该元素

body::after{
   position:absolute; 
   width:0; 
   height:0; 
   overflow:hidden; 
   z-index:-1; /* hide images */
   content: url(/images/service-bg-over.jpg);   /* load images */
}

---

我不会为您编写解决方案，但基本上，您可以在JS中这样做：悬停上的事件侦听器->在缓存中加载图像->加载图像时，将div的背景url设置为该图像。您可以预加载图像。有不同的方法可以做到这一点，你可以看到一些