Javascript 如何用图像替换窗体按钮，并将图像悬停更改？还有精灵和单独的图像？

我记得在很久以前的某个地方读到过这样一篇文章：当你试图在悬停状态下改变一个图像时，精灵——或者至少我认为这就是它们的名字——比使用两个图像要好。我相信这个理由与没有延误有关。例如，有时我会去一个网站，去点击一个链接，一瞬间那里没有图像。。。它是空白的。。。在第二个出现之前。这不是因为第二个图像必须先加载吗？如果是这样，“精灵”不是更好吗

现在我想采取哪种方式更好呢。基本上，我有一个表单按钮，我想改变一个图像。。。当鼠标悬停在上方时，我希望它改变

我在谷歌上搜索了一下，发现做一些类似于

的事情是可行的，但其他人都说这不是正确的方式

那我该怎么做呢？精灵还是单独的图像？最重要的是，我该怎么做

非常感谢,，

---

新手。

是的，精神在性能/带宽方面更好，您应该看看：

另外，请看：

---

是的，烈酒在性能/带宽方面更好，您应该看看：

另外，请看：

---

CSS精灵是一个不错的选择，否则你必须“预加载”你的悬停图像

假设你的按钮宽100像素，高20像素

创建一个新的100px×40px图像，将“默认”状态图像放在顶部，将“悬停”状态图像放在底部

然后在HTML中创建按钮

<input type="button" class="submit" />

然后只需更改悬停状态下背景图像的位置

.submit {
    background-position: bottom;
}

您的悬停图像可能已经加载，因此不会有任何延迟

---

玩得开心

CSS精灵是最好的选择，否则你必须“预加载”你的悬停图像

假设你的按钮宽100像素，高20像素

创建一个新的100px×40px图像，将“默认”状态图像放在顶部，将“悬停”状态图像放在底部

然后在HTML中创建按钮

<input type="button" class="submit" />

然后只需更改悬停状态下背景图像的位置

.submit {
    background-position: bottom;
}

您的悬停图像可能已经加载，因此不会有任何延迟

---

玩得开心

太棒了，我要试试。问题是，我的图像的高度总共是91像素（两种状态）。。。我可以做一些像45.5像素的事情吗？当你堆叠两个相同尺寸的图像时，总高度应该是偶数。没有一个数字乘以2是奇数，所以你应该修复你的图像：）是的，真的，哈哈，我猜出来了。我在Photoshop中裁剪了1/2像素。但现在我有另一个问题：/CSS工作得很好，除了。。。图像显示，但这是我想在悬停上显示的图像。。。“底部”部分如你所说。没有悬停效果吗？啊！我忘了添加

：悬停
。。。非常好，谢谢Marko！太棒了，我要试试。问题是，我的图像的高度总共是91像素（两种状态）。。。我可以做一些像45.5像素的事情吗？当你堆叠两个相同尺寸的图像时，总高度应该是偶数。没有一个数字乘以2是奇数，所以你应该修复你的图像：）是的，真的，哈哈，我猜出来了。我在Photoshop中裁剪了1/2像素。但现在我有另一个问题：/CSS工作得很好，除了。。。图像显示，但这是我想在悬停上显示的图像。。。“底部”部分如你所说。没有悬停效果吗？啊！我忘了添加
：悬停
。。。非常好，谢谢Marko！