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

【问题标题】：What's the best way to switch images on mouse-over events?在鼠标悬停事件上切换图像的最佳方法是什么？
【发布时间】：2011-06-09 01:04:45
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

【解决方案1】：

使用CSS sprites。

因为“两个”图像都是同时下载的 - 它们会立即出现在用户面前。

【讨论】：

@m.edmondson 好吧，不管怎样，你打算使用 jQuery 来使翻转在所有浏览器上都能工作吗？
为什么是 JS，当 CSS :hover 可以做到时（bg-image 案例）。
@bazmegakapa :hover 仅适用于 Internet Explorer 中的
无需使用 JQuery - 使用 CSS
@Patrick：是的，在 IE6 中，你说这不是必需的。从 IE7 开始，IE 对 :hover 没有任何问题。检查：quirksmode.org/css/contents.html

【解决方案2】：

定义两个类，如 (clsImg1,clsImg2) 并将图像定义为它们的背景。您应该在调用 mouseover-mouseout 事件时更改 classNames

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以尝试在显示之前使用 jQuery 加载图像：

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

【讨论】：