CSSスプライトのロールオーバーをRetina対応するには?

タイトル画像で、スマホ向け表示に苦戦しています。
クリック時に効果が見れるよう、CSSスプライトを使っています。
しかし、この方法を使用するとRetina対応が上手くいきません。
どうすれば良いでしょうか?

ちなみに試したCSSはこちらです。
.sprites {
background: url(/images/logo.png) no-repeat 0 top;
width: 104px;
height: 36px;
display: block;
margin-top: 10%;
text-indent: -9999px;
}
@media only screen and(-webkit-min-device-pixel-ratio: 1.5) {
.sprites {
background-image: url(/images/logo@2x.png) no-repeat 0 top;
background-size: 104px 72px;/* 画像自体の縦横半分のサイズ */
}
}
.sprites:hover {
background: url(/images/logo.png) no-repeat 0 bottom;
}
@media only screen and(-webkit-min-device-pixel-ratio: 1.5) {
.sprites:hover {
background-image: url(/images/logo@2x.png) no-repeat 0 bottom;
background-size: 104px 72px;/* 画像自体の縦横半分のサイズ */
}
}

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/04/28 19:22:30
  • 終了:2014/05/05 19:25:07

回答(0件)

回答はまだありません

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません