Javascript 图像按钮在悬停时改变位置

我在那天看到了巨大的影响，现在我什么也找不到

其概念是，存在一个图像，该图像同时具有正常和悬停外观，并组合为一个图像。悬停时，图像将移动并显示悬停外观

下面是一个直观的示例：

我很确定它包含这样的代码：

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

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

悬停：
document.getElementById（“按钮”）.top=“-50”；

CSS：

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

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

CSS:

HTML:

​

CSS:

div{
宽度：98px；
高度：45px；
/*边框：1px纯红*/
背景图像：url（'http://i.stack.imgur.com/kxznh.png');
背景位置：-83px-123px；
}
div:悬停{
背景位置：-83px-177px；
}
​

HTML：

​

CSS:

div{
宽度：98px；
高度：45px；
/*边框：1px纯红*/
背景图像：url（'http://i.stack.imgur.com/kxznh.png');
背景位置：-83px-123px；
}
div:悬停{
背景位置：-83px-177px；
}
​

---

这是精灵的常见做法。我一直在用：）他试过了吗？现在它完全是一种网络标准。事实上，除非你的按钮是动画的，否则你会疯狂地用其他方式来做，哈哈，我在任何地方都找不到它，所以我只是想确定…我现在就去试试。好吧，我接受这个答案，因为这确实是我在寻找的，但我正在编辑原始帖子，以便它正确地反映它如何与我的图像一起工作（垂直重新定位）。谢谢！这是精灵的常见做法。我一直在用：）他试过了吗？现在它完全是一种网络标准。事实上，除非你的按钮是动画的，否则你会疯狂地用其他方式来做，哈哈，我在任何地方都找不到它，所以我只是想确定…我现在就去试试。好吧，我接受这个答案，因为这确实是我在寻找的，但我正在编辑原始帖子，以便它正确地反映它如何与我的图像一起工作（垂直重新定位）。谢谢！是的，我不知道名字。我以为这是javascript技巧，不是css：）是的，我不知道名字。我认为这是javascript技巧，而不是css:）

<div></div>​

<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>