悬停效果无法正常工作

如何加载原始图像，以便当用户将光标置于图像顶部时，它应该会自动更改而不显示白色背景，然后加载原始图片？是否有任何加载我的网页加载原始图像的代码？请告诉我。我的代码是：悬停效果无法正常工作

#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

悬停效果无法正常工作

回答

相关问题