图像按钮改变悬停时的位置

Question

我在当天看到的效果很好，现在我找不到任何关于它的信息。

概念是有一个图像，正常和onHover外观合并为一个图像。悬停时，图像会移动并显示onHover外观。

这是一个直观的例子：

我很确定它涉及这类代码：

<img id="button" src="img.png" width="100" height="50">

onHover:
document.getElementById("button").top = "-50";

Answer 1

CSS：

#button {
    background-image:url('img.png');
    background-position: 0 0;
}

#button:hover {
    background-position: 0 -50px;
}

Answer 2

HTML：

<div></div>​

CSS：

<style>
div{
    width:98px;
    height:45px;
    /*border:1px solid red;*/
    background-image:url('http://i.stack.imgur.com/kxznh.png');
    background-position: -83px -123px;
}
div:hover {
    background-position: -83px -177px;
}
​</style>

Here is a demo for it