鼠標懸停元素閃爍

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。因此，即使您的圖像被替換，您的事件也會被觸發，並且圖像被替換爲自身，這可能會導致閃爍。