CSS：避免图像首次悬停闪烁

Question

CSS：避免图像首次悬停闪烁

73

我有一个锚点，当使用包含background-image的类class-btn悬停时，会更改其背景图像。

悬停时，它具有

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

当页面首次加载并且您第一次悬停在此按钮上时，它会闪烁（下载悬停图像需要约半秒钟）。如何在没有JavaScript的情况下避免闪烁（只允许使用简单的CSS和HTML）？

我尝试在Stack Overflow中搜索类似的问题，但没有找到。

只需添加：

• 我应该“预加载”悬停的图像吗？怎么做？

• 我应该使用 z-index 或 opacity 来进行调整吗？

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

- Haradzieniec

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- asc99c · Answer 1

如果它们具有相同的尺寸，一种可能性是将两个图像直接叠放在一起，使用 CSS 的 :hover 类为顶部图像设置 display: none;。

这样，两个图像都将被预加载，但悬停时会使第二个图像可见。

- Colin James Firth · Answer 2

这种技术对我很有效，不仅可以预加载悬停图片，而且还准备好并等待显示。（大多数其他解决方案依赖于在悬停时切换背景图像，但浏览器似乎需要一些时间来弄清楚，无论图像预加载了多少。）

在具有两个图像的容器上创建:before和:after伪元素，但隐藏你想在悬停时看到的那个。然后，在悬停时，切换可见性。

只要它们共享相同的大小和定位规则，您应该会看到一个整洁的交换。

.image-container {
    &:before { display: block; background-image: url(uncovered.png); }
    &:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
    &:before { display: none; }
    &:after { display: block; }
}

- Pluto · Answer 3

只需更改背景图像的大小，而不是其源！所以...

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

- Spencer Lively · Answer 4

最佳方法是将图片插入到网页上并将显示设置为“none”。