CSSスワップイメージとサイジング

Question

私はここで検索したところ、解決策を見つけることができませんでした。実際の「イメージ」オブジェクトを使用し、イメージのサイズを適切に変更した場合、jQueryを使用してマウスオーバーを行う方法はわかります。CSSで同じことを行う方法があるかどうかを判断しています背景URLを持つ特定のクラス。

.sample #img_id { 
    width: 80px; 
    height: 80px; 
    background: url('sample.gif') left no-repeat top; 
} 

.sample #img_id:hover { 
    width: 80px; 
    height: 80px; 
    background: url('sample-mouseover.gif') left no-repeat top; 
} 

、その後、私のHTMLコード：

はここ& CSSに私のコードです

<div class="sample"> 
    <div id=img_id></div> 
</div> 

今 - 画像のサイズを変更しません - 画像は200個のピクセル×200個のピクセルと言っている場合。 （つまり、「オーバーフロー」します）。私は画像が80px x 80pxにサイズ変更されることを期待していました。

また、私は、この試みている：

.sample img { 
    width: 80px; 
    height: 80px; 
    background: url('sample.gif') left no-repeat top; 
} 

.sample img:hover { 
    width: 80px; 
    height: 80px; 
    background: url('sample-mouseover.gif') left no-repeat top; 
} 

をして、私のHTMLコード：

<div class="sample"> 
    <img src=sample.gif> 
</div> 

しかし、これはどちらか動作しません。 「最初の」画像は適切に（つまり80×80ピクセルに）「サイズ変更」されますが、マウスオーバーすると画像は200ピクセル×200ピクセル（サイズ変更なし）になります。

CSSを介してmouseverの80x80pxに収まるようにサンプル画像を適切にサイズ変更/拡大縮小するにはどうすればよいですか？ （私が言ったように、私はjQueryを使ってそれを理解しました。CSSを使って簡単に解決できるはずですが、正しくサイズを変更する方法はわかりません）。

ありがとうございます！

Answer 1

background-size財産に取り組んだことは、あなたが背景画像の大きさを変更することができます、あなたはそれがIE8、おそらくOpera Miniの中で作業する必要がありunless。

Answer 2

おそらく構文、それはこのfiddle