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

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;
}
​&lt;/style>

这是一个演示