css - CSS 画像のロールオーバーを表示する (対スライドイン)

Question

何が起こっているのかわかりませんが、jquery が機能していると思われます... ホバー時に画像スプライトを使用していますが、画像が所定の位置に表示されるのではなく、右からスライドします。http://www.maidinhoboken.com/testpage/で、青いバブルが赤いバブルに変わるのを確認してください。

所定の位置に表示するにはどうすればよいですか?

HTML:

<a href="#" class="rollover" title=""><span class="displace">Test</span></a>

CSS:

a.rollover {
display: block;
width: 190px;
height: 190px;
text-decoration: none;
background: url(images/bubble_rollover1.png);
}

a.rollover:hover {
background-position: -190px 0;
}

.displace {
position: absolute;
left: -5000px;
}