6

ホバー機能でボタンの背景画像のy位置を変更したい。xpos を保持する簡単な方法はありますか、それとも最初に位置を取得し、それを分割して $.css() で再度使用する必要がありますか?

誰かがそれらのいずれかをホバーした場合、3 つのスパンの背景位置をすべて変更する必要があります。したがって、 bt_first:hover は使用できないようです。

ここに私の使用法があります。xpos の値を変更したくないところに #should stay same# と書きました。

$('.bt_first,.bt_sec,.bt_third').hover(function(){
        $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -150px'})
},function(){
        $('.bt_first,.bt_sec,.bt_third').css({'background-position':'#should stay same# -110px'});
});

これが私のhtmlです。

<div><a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a></div>

そしてCSS：

.bt_first,.bt_sec,.bt_third,.logout_t,.comments_t span {
    background: url('img/toolbar_bckrnd.png') no-repeat;
}
.bt_first {
    background-position: left -110px;
    display: inline-block;
    height: 24px;
    width: 15px;
}
.bt_sec {
    background-position: -149px -110px;
    display: inline-block;
    height: 24px;
    width: 2px;
}
.bt_third {
    background-position: right -110px;
    display: inline-block;
    height: 24px;
    padding: 0 10px;
}
4

3 に答える 3

3

これはうまくいくはずです：

$('#add_comment_btn').hover(function(e) {
    var s = e.type == 'mouseenter' ? '-134px' : '-110px';        
    $(this).children().css('background-position', function(i,v) {
        return v.replace(/-?\d+px$/, s);
    });
});

#add_comment_btnこれはアンカーに適用されます。複数のアンカーがある場合は、クラス セレクターを使用してそれらをすべて選択します。

ところで、上記のコードは基本的に、回答に投稿したコードと同じです。冗長性を取り除いただけです。

ところで、クラスをアンカーに追加したくない場合は、次のように選択できます。

$('.bt_first, .bt_sec, .bt_third').parent().hover( .... the above code
于 2011-02-05T00:14:41.330 に答える
0

多分このように：

var bg = $('#element').css('backgroundPosition').split(' ');
bg[1] = '-200px';

$('#element').css('backgroundPosition', bg.join(' '));

background-position は常に順序で格納されるためhorizontal vertical、2 番目の配列値は常に垂直方向の値であるため、これは機能するはずです。

ただし、これは 1 つの要素でしか機能しない場合があります。複数の要素では、ループを使用する必要がある場合があります。

于 2011-02-04T16:39:16.153 に答える
0

簡単な解決策はないと判断し、最後に解決策を見つけました。誰かがこれを必要とする場合、以下のスクリプトは問題なく動作します。

$('.bt_first,.bt_sec,.bt_third').hover(
function(){
    var id = $(this).closest('a').attr('id');
    var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' ');
    var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' ');
    var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' ');
    bg1[1] = '-134px';
    bg2[1] = '-134px';
    bg3[1] = '-134px';
    $('#'+id+' > .bt_first').css('background-position', bg1.join(' '));
    $('#'+id+' > .bt_sec').css('background-position', bg2.join(' '));
    $('#'+id+' > .bt_third').css('background-position', bg3.join(' '));
},
function(){
    var id = $(this).closest('a').attr('id');
    var bg1 = $('#'+id+' > .bt_first').css('background-position').split(' ');
    var bg2 = $('#'+id+' > .bt_sec').css('background-position').split(' ');
    var bg3 = $('#'+id+' > .bt_third').css('background-position').split(' ');
    bg1[1] = '-110px';
    bg2[1] = '-110px';
    bg3[1] = '-110px';
    $('#'+id+' > .bt_first').css('background-position', bg1.join(' '));
    $('#'+id+' > .bt_sec').css('background-position', bg2.join(' '));
    $('#'+id+' > .bt_third').css('background-position', bg3.join(' '));
}
);

すべての要素の親として「id」を持つ「a」タグが必要であり、これらの要素は最初の子でなければなりません。それ以外の場合は、スクリプトを変更してください。

<a id="add_comment_btn"><span class="bt_first comments_t"><span>&nbsp;</span></span><span class="bt_sec">&nbsp;</span><span class="bt_third">Comments</span></a>
于 2011-02-04T23:27:55.530 に答える