我有多个在悬停时会发生变化的背景图像。
例子:
.class1 {
background: url(/img/img-1.jpg) no-repeat top center;
}
.class1:hover {
background: url(/img/img-2.jpg) no-repeat top center;
}
图像现在会闪烁，因为它们会在您将鼠标悬停在图像上的那一刻加载。 我试过使用 sprite，但这不起作用，因为移动设备的图像会改变大小。
有什么想法吗？可以是 css 或 jquery，没关系
最佳答案
您可以在 <head> 中像这样使用 HTML5 链接预取标签:
<link rel="prefetch" href="/img/img-1.jpg" />
信息在这里:https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
关于css - 如何预加载CSS :hover background-images，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45141982/