在鼠标悬停事件上切换图像的最佳方式是什么？

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');