鼠标悬停元素闪烁

Question

我在网页上有一张图片，当用户将鼠标悬停在网页上时，会显示另一张图片。当它悬停在出现的图像上时，它会闪烁。

有人知道为什么会这样吗？

贝

更新：悬停时第一张图片不会消失，左上角顶部会显示另一张（较小）图像。当现在移过那个较小的图像时，会出现闪烁。

网站上的图片是图库的一部分，因此它是一个php变量，当用户从图像列表中进行选择时会加载。因此将一个嵌入另一个非常困难。

Answer 1

因为浏览器正在获取新图像。最好的解决方案是将两个图像合并为一个，并且纯粹使用CSS来改变:hover上的背景位置，或者（对于IE6和非锚元素）用JS改变背景位置。

Answer 2

在IE中？ IE因为不缓存动态加载的图像（使用CSS :hover或由于Javascript事件而臭名昭着）而臭名昭着。您可以使用CSS精灵（基本上，使用一个图像文件来显示两个图像，使用定位来显示一个或另一个; tutorial，由Mike Robinson链接），或者您可以使用图像预加载：< / p>

var preloadImg = document.createElement('img');
preloadImg.src = 'path/to/image';

编辑：其他浏览器在首次加载时也会这样做。 IE可能会继续在每个交换机上执行此操作。

Answer 3

如果我理解你，你可能每次触发mouseover事件时都会替换你图像的src。因此，即使您的图像被替换，您的事件也会被触发，图像会被自身替换，这可能会导致闪烁。

Answer 4

我猜你可能正在使用IE浏览器。这是它在某些版本中实现缓存的方式的错误。您可以通过将Web服务器配置为发送proper cache headers或使用CSS sprites来解决此问题。我建议使用后者，因为这意味着更少的HTTP请求，即使没有JS，预加载也能正常工作。