用Jquery仅更改背景图片的y轴位置

Question

我想使用hover函数改变按钮的背景图片y轴位置。是否有简单的方法来保留xpos，或者我需要先获取位置，再拆分并再次使用$.css()。

如果有人悬停在其中任何一个上面，我应该更改所有3个span的背景位置。因此，bt_first:hover似乎无法使用。

这是我的用法。我在“#should stay same#”的位置写了这句话，表示我不想更改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;
}

- aiternal

---

类似：http://stackoverflow.com/questions/2117594/adding-amount-to-background-position-on-click-jquery - thirtydot

@thirtydot 我认为这不一样。我只想改变3个不同类的ypos。xpos应该保持预定义。你的帖子谈论了其他事情。我错了吗？无论如何，谢谢。 - aiternal

Kemal：我说的是“类似”，而不是“完全相同”。那个问题有代码可以检索background-position，将两个值分离出来，更改其中一个值，然后重新设置回去。这正是你想要做的。 - thirtydot

@thirtydot 对不起，我误解了。我在寻找一种方法时发现了那篇文章。只是想问是否有简单的方法。谢谢。 - aiternal

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

- Šime Vidas

Answer 2

可能是这样的：

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

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

由于background-position始终以“水平 垂直”的顺序存储，因此这应该适用于第二个数组值始终是垂直值的情况。

尽管如此，这可能仅适用于一个元素。对于多个元素，您可能需要使用循环。

- acme

---

谢谢。它能工作，但如果我只更改一个背景会更好。我需要更改所有的背景。我还有不止一个按钮。等等，这变得复杂了。 - aiternal

Answer 3

我决定没有简单的解决方案，最终找到了一种出路。如果有人需要，下面的脚本可以正常工作。

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

- aiternal