通过Jquery仅改变背景图像的y位置

Question

我想用悬停功能更改按钮的背景图像y位置.是否有一种简单的方法来保持xpos,或者我应该首先获得位置,拆分它并再次使用$ .css().

如果有人悬停其中任何一个,我应该改变所有3跨度的背景位置.所以bt_first:悬停似乎不可用.

这是我的用法.我写了#should保持相同#来放置我不想改变xpos的值:

$('.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;
}

Answer 1

这应该有效：

$('#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