懸停效果無法正常工作

如何加載原始圖像，以便當用戶將光標置於圖像頂部時，它應該會自動更改而不顯示白色背景，然後加載原始圖片？是否有任何加載我的網頁加載原始圖像的代碼？請告訴我。我的代碼是：懸停效果無法正常工作

#middlefoto{ 
    background-image:url(../images/middleblack.jpg); 
    margin-left:1px; 
    height:158px; 
    width:333px; 
    } 
#middlefoto:hover{ 
    background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat; 
    }

來源

2013-03-07 anvesh K

它取決於瀏覽器下載映像的速度。您無法在加載原始圖片時顯示原始圖片，因爲原始圖片也必須加上 – 2013-03-07 18:25:36

您看到即時空白背景的原因是因爲懸停圖像尚未從服務器加載。爲了避免這種情況，請預加載圖像。有幾種方法可以做到這一點，但概念是一樣的：強制瀏覽器在實際需要之前加載圖像。以下是使用JavaScript執行此操作的簡單方法：

function preloadImages(sources) 
{ 
    var img = new Image(); 
    for (var i = 0; i < sources.length; i++) { 
     img.src = sources[i]; 
    } 
} 

preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);

來源

2013-03-07 18:34:47 RoccoC5

使用精靈定位。

在W3 Schools

來源

2013-03-07 18:27:16 Rafe

ha可能是更好的答案 – 2013-03-07 18:27:50

errr !!! 404頁面不存在。 :( – 2013-03-07 18:32:00

我知道有些人不喜歡w3schools，但404只是侮辱:)嘗試http://css-tricks.com/css-sprites/代替。 – Rafe 2013-03-07 18:33:30

包括以離屏元件（與CSS推離屏幕）中的圖像查找更多信息。這將導致瀏覽器下載圖像，以便它可以適應翻滾。您可以在頁面加載後清除屏幕外的圖像。

<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />

（真的不使用內聯樣式）然後，如果你正在使用jQuery

$(document).ready(function(){ $('.preloader').remove(); });

清理。

來源

2013-03-07 18:27:35

懸停效果無法正常工作

回答

相關問題