css3背景过渡在第一个时闪烁：悬停

Posted 2023-03-06

【中文标题】css3背景过渡在第一个时闪烁：悬停

【英文标题】：css3 background transition flickers on first :hover

【发布时间】：2012-10-12 12:13:03

【问题描述】：

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

非常感谢！

【参考方案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;

【讨论】：

是的，您可以在每个按钮的第一个鼠标悬停处看到图像下载请求。

所以我想，background: url../images/mail_button_hover.png) 0 -100px no-repeat; background:url(../images/mail_button.png) no-repeat 0px 0px; 作为预加载图像的一种方式？...这似乎不起作用..我一定做错了什么。

不，这个想法是正常状态下的元素应该具有 same 背景图像作为悬停状态，以便浏览器在悬停本身发生时不需要下载悬停图像。如果您的链接已经有不同的背景图片，您可以使用多个背景图片 (IE9+) 或添加嵌套的 SPAN 元素和 display: block 用于此目的。

【参考方案2】：

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

【讨论】：

Argh，刚刚被 Marat 击败，该解决方案应该可以工作，但是有很多预加载图像的方法。祝你好运！