Question

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

声明

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中，好像某个页面正在加载

Answer 1

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

onMouseOver="testIn(this)"


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

BTW - 惯例现在使用“onmouseover”（无上限）

Answer 2

改为使用:hover伪类和CSS Sprites。

Answer 3

您正在进度条中获取活动，因为在您调用该函数之前，您的onmouseover图像不会加载。

你可以使用一个精灵结合：悬停CSS效果 - 就像@Tomasz提到的那样。

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

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

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

与此同时，这会不必要地增加页面大小。

我真的会尝试使用：hover CSS和sprite，或重新评估您尝试使用图像交换完成的重要性（它是否真的是整个项目的最佳解决方案？）。

在Firefox中的图像交换

3 个答案: