Question

this page上有一些按钮（朝向底部的小图标），我正在使用一些css过渡来改变背景。但是图标第一次悬停时会出现闪烁！我试图实施this thread提供的建议，但无济于事。有没有人知道如何在没有闪烁的情况下完成这项工作？

非常感谢你！

Answer 1

由于没有提供最小的测试用例，我可以假设你的图像需要预先加载，而过渡与问题无关。

可以通过将背景图像指定为元素的正常（非悬停）状态的背景，并添加具有负值的background-position来预加载背景图像，以便在正常状态下看不到背景图像。

例如：

/* Image is supposed to have height less than 100px here. */
A {
    background: url(example.png) 0 -100px no-repeat;
}

A:hover {
    background-position: 0 0;
}

顺便说一下，将两种状态（正常和悬停）的图像放到一个物理图像文件中，然后在悬停时更改background-position是惯例：

/* "rollover-sprite.png" file contains images for both states side by side. */
A {
    background: url(rollover-sprite.png) no-repeat;
}

/* Width of image for each state is supposed to be 100px here
  (sprite will be ~200px wide). */
A:hover {
    background-position: -100px 0;
}

Answer 2

您需要预加载要切换到的图像，“闪烁”是悬停和实际加载图像之间的短暂延迟。有很多方法可以做到这一点，你使用的是jQuery吗？

css3背景转换首先闪烁：悬停

2 个答案: