javascript - 画像ボタンはホバーの位置を変更します

Question

当時見た大きな効果があり、今では何も見つかりません。

コンセプトは、通常の外観とonHoverの外観の両方が1つの画像に結合された画像があるということです。ホバーすると、画像がシフトし、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>

これがそのデモです