将鼠标悬停在提交按钮上：我这样做是最好的方法吗？有一个更好的方法吗？

Question

我目前的代码是：

CSS：

.submitorder {
background-image: url('https://www.amleo.com/images/art/PON1.jpg');
width: 205px;
height: 52px;
font-size:0px;
}

.submitorder:hover {
background-image: url('https://www.amleo.com/images/art/PON2.jpg');
width: 205px;
height: 52px;
font-size:0px;
}

HTML只是：

<div><input type="submit" class="submitorder"/></div>

我所拥有的页面位于： https://www.amleo.com/checkout.aspx

我应该将图像合并为1张图像吗？如何在悬停时将用户看到的内容移动到图像的下一半？

只是想了解什么是好/坏/丑。 ：）

谢谢。

Answer 1

看一下css sprites：http://css-tricks.com/css-sprites/

你应该创建这样的东西：

your sprite >

（完成csssprites.com/）

然后使用：

.submitorder {
background-image: url('sprite.jpg');
background-position: 0px 0px;
width: 205px;
height: 52px;
font-size:0px;
}

.submitorder:hover {
background-position: 0px -62px;
}

Answer 2

你可能想要这样的东西。

http://css-tricks.com/css-sprites/