html - css:避免图像悬停第一次闪烁

Question

我有一个 anchor ，当悬停在包含 background-image 的类 class-btn 上时，它会更改其背景图像。

悬停时，它有

a.class-btn:hover
{
    background-image('path/to/image-hovered.jpg');
}

当页面第一次加载并且您第一次悬停此按钮时，它会闪烁(下载悬停的图像大约需要半秒钟)。如何在没有 JavaScript 的情况下避免闪烁(只允许简单的 css 和 html)？

我试图在 Stack Overflow 中搜索类似的问题，但没有成功。

刚刚添加:

• 我应该“预加载”悬停图像吗？怎么样？
• 我应该使用 z-index 还是不透明度？

它发生在所有浏览器上，因此该解决方案应该适用于所有浏览器。

Answer 1

这是我用过几次的简单有效的css图片预加载技术。您可以通过放置内容来加载多个图像:url() url() url()...等。

body:after {
 display: none;
 content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}