0

コード：

.icon_right {
    background-position: -235px -95px;
    background-repeat: no-repeat;
    float: right;
    height: 34px;
    margin-right: 16px;
    margin-top: 15px;
    position: relative;
    width: 22px;
    z-index: 200;
}
.icon_base {
    background-image: url("/sprite.png");
}

<span class="icon_base icon_right"></span>

icon_right をホバーすると、フェードイン/フェードアウトを使用して画像をゆっくりと変更したいと考えています。画像はスプライトです。jqueryを使用してこれを完了するにはどうすればよいですか?

これをicon_right cssで使用してみました：

         -webkit-transition: opacity .50s ease-in-out;
 -moz-transition: opacity .50s ease-in-out;
 -ms-transition: opacity .50s ease-in-out;
 -o-transition: opacity .50s ease-in-out;
 transition: opacity .50s ease-in-out;

アップデート：

このような何かがうまくいく： 

transition: 10s background-color;

しかし、バックグラウンドの位置についてはどうすればよいですか?

4

1 に答える 1

0 
<span id="icon-holder" class="icon_base icon_right"></span>

$('#icon-holder').hover(function(){

  $('#icon-holder').removeClass('icon_right', 500);

});

これがお役に立てば幸いです

于 2013-08-06T14:07:28.203 に答える