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

Question

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

当我将鼠标移到我的网页上的一个对象上时，我想交换2个图像。

我想知道两种情况：     - 分配给,,,元素的css-背景图像（图像url在css文件中）     - 元素（图片网址为html代码）

我目前正在使用jQuery。但问题是第二次图像总是在第一次发生翻转事件时显示有一点延迟，因为它需要加载。

NB。我需要一个兼容所有浏览器的解决方案！ （IE 6-7不是必需的.IE 8，Firefox，Safari，Chrome ......）

感谢

Answer 1

使用CSS sprites。

因为“两个”图像一次下载 - 它们会立即显示给用户。

Answer 2

在这种情况下，您可以使用CSS sprite。

您还可以阅读What are the advantages of using CSS sprites?

Answer 3

定义两个类（clsImg1，clsImg2）并将图像定义为背景。 您应该在名为

的mouseover-mouseout事件时更改classNames

Answer 4

您可以尝试使用jQuery加载图像，然后再以这种方式显示：

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