Firefox中的图像交换答案

【问题标题】：Image swap in firefoxFirefox中的图像交换
【发布时间】：2011-02-05 05:50:46
【问题描述】：

我正在尝试在鼠标悬停时更改按钮的背景图像。

用语句

function testIn ()
{
elem.style.backgroundImage = 'url("image_name_in.png")';
}
function testOut ()
{
elem.style.backgroundImage = 'url("image_name_out.png")';
}

我正在使用 onMouseOver=testIn() 和 onMouseOut=testOut() 进行此操作。

这里的问题是，当我将鼠标悬停时。我看到进度条（右下角）显示在 Firefox 中，好像正在加载某些页面

【问题讨论】：

标签： javascript html css

【解决方案1】：

改用:hover 伪类和CSS Sprites。

【讨论】：

这行得通！。我删除了 javascript 例程。我的假设是，每当我们执行 mousein、mouseout 时，我们都必须手动更改图像。但是 css 属性 hover 已经处理了一切。感谢您的帮助。

【解决方案2】：

您需要进行一些更改才能传递您的对象引用：

onMouseOver="testIn(this)"


function testIn (elem)
{
elem.style.backgroundImage = 'url("image_name_in.png")';
}

顺便说一句 - 约定现在使用“onmouseover”（无大写）

【讨论】：

这是一个复制粘贴错字！。我已经有了你提到的代码。

【解决方案3】：

您会在进度条中看到活动，因为您的鼠标悬停图像在您调用该函数之前不会加载。

您可以使用结合 :hover CSS 的精灵来获得效果 - 就像 @Tomasz 提到的那样。

如果您不想将默认和悬停图像状态组合成一个精灵，您可以尝试为悬停图像添加一个额外的容器（将其默认 CSS 设置为 display:none;）然后使用 JS 或 jQuery在鼠标悬停或悬停时交换默认和悬停图像的显示状态。

$('myDefaultImage').hover(function() {
   $(this).hide();
   $('myHoverImage').show();
}, function () {
...the inverse, etc.
});

这将消除进度条问题，因为您的所有图像将一起加载。

同时，这会不必要地增大您的页面大小。

我真的会尝试使用 :hover CSS 和 sprite，或者重新评估您尝试通过图像交换完成的任务的重要性（这真的是您整个项目的最佳解决方案吗？）。

【讨论】：