シミュレーションimgのhover切り替え

imgについて:hover;まず、imgのurl属性はcssで設定できないので、img:hover{url:'xxx'}は存在しません.もともとbackgroundを背景画像として設定することができます.ただし:

IE9+、Firefox 4+、Opera、Chrome    Safari 5+    background-size   。

IE低バージョンではこの属性のサポートが不完全で、背景画像のスケーリング設定がサポートされておらず、原図を必要な大きさに裁断するしかない(retina:@media only screen and(-webkit-min-device-pixel-ratio:2){......})これは面倒に見えますが、今日はちょうどhoverで画像を切り替えて閉じるボタンを作る必要があります.先輩に聞いてみると、次のような解決策が得られました.

<a class="close-btn">
    <img src="/images/close.png" alt=""/>
</a>
//close.png 23*46px            
.close-btn{
    display: inline-block;width:23px;height:23px;position: relative;overflow: hidden;
}
.close-btn img{
    position: absolute;top:0;width:100%;
}
.close-btn:hover img{
    top:-23px;
}

これでimgのhover切替効果をシミュレートしました~