在鼠標懸停事件上切換圖像的最佳方式是什麼？

Question

在鼠標懸停事件上切換圖像的最佳方式是什麼？

當我將鼠標移到和移出網頁上的對象時，我想交換2張圖像。

我想知道這兩種情況下： - 分配給CSS的背景圖片，元素（圖片網址是在CSS文件） - 元素（圖片網址是在HTML代碼）

我目前正在使用jQuery。但問題是第二張圖片總是顯示第一次發生翻滾事件時的延遲，因爲它需要加載。

注意：我需要一個與所有瀏覽器兼容的解決方案！ （IE 6-7不是必需的。IE 8，火狐，Safari，Chrome瀏覽器...）

感謝

Answer 1

使用CSS sprites。

因爲「兩個」圖像一次下載 - 它們將立即顯示給用戶。

Answer 2

您可以在此情況下使用CSS sprite。

您還可以閱讀What are the advantages of using CSS sprites?

Answer 3

定義兩個類（clsImg1，clsImg2）並將圖像定義到其背景。 你應該改變的類名，而鼠標懸停，鼠標移開事件稱爲

Answer 4

你可以嘗試着表示前面的這種方式來加載使用jQuery的圖像：

$('img').attr('src', 'YOUR_IMAGE_PATH').hide().appendTo('html');