鼠标悬停元素闪烁

Question

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

任何人都知道这是为什么？

托尼

UPDATE：徘徊时，第一个图像不dissapear，只是另（较小）的图像将会出现在左上角的顶部。当现在移过那个较小的图像时，出现闪烁。

该网站上的图像是一个画廊的一部分，所以它是一个PHP变量，并在用户从图像列表中选择时加载。因此将一个嵌入另一个非常困难。

Answer 1

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

Answer 2

在IE中？ IE不会缓存动态加载的图像（使用CSS :hover或Javascript事件）。您可以使用CSS精灵（基本上，使用一个图像文件显示两个图像，并利用定位显示一个或另一个; tutorial，通过Mike Robinson链接），也可以使用预加载图像设置：

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

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

Answer 3

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

Answer 4

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