マウスオーバすると画像の配置が変わる

質問

今回コチラ（http://www.skuare.net/test/jrumble.html）のjqueryを入れました。

サイト：http://snapkidz.biz/wp/
ブルブルする場所はコップの部分になります。

記載部分は以下です。
ーheader.phpー

<a href="#" class="cup">cup</a>

ーCSSー
a.cup {
display: block;
width: 90px; /* 画像1枚分の横幅 */
height: 110px; /* 画像1枚分の高さ */
text-indent: -9999px; /* 文字を見えなくする */
background-image: url("http://snapkidz.biz/wp/wp-content/uploads/2011/12/cup.png"); /* 画像ファイル名 */
position:relative;
top:303px;
left:1080px;
}

a.cup:hover {
background-position: top right; /* 背景画像の表示開始基準を右上に変更 */
}

マウスオーバすると画像の配置が移動してしまいます。
これはどうすればなおるのでしょうか？

宜しくお願いします。

回答No.1

noname#158634 · ベストアンサー

＞top:303px;
＞left:1080px;

お礼

なるほど・・・理解は出来ましたが、これを消してしまうと今の配置からずれてしまいます・・・どうすればブルブルさせた状態で今の場所におけますか？

補足

出来ました！なるほど。。。divでもう一つクラスを作ってあげればよかったのですね。。。なるほど。

ヒントを与えて頂きありがとうございます。