通过Jquery只更改背景图像的y pos [英] Changing only y pos of background image via Jquery

问题描述

我想使用悬停功能更改按钮的背景图片y位置。有没有一个简单的方法来保持xpos或者我应该先获得位置，拆分并再次使用$ .css（）。

I want to change button's background image y position with hover function. Is there a simple way of keeping xpos or should I get position first, split it and use again with $.css() again.

我应该更改所有3 span的背景如果有人徘徊他们的任何位置。所以bt_first：hover似乎不可用。

I should change all 3 span's background position if somebody hover's any of them. So bt_first:hover not seems usable.

这是我的用法。我写了#should保持不变＃我不想改变xpos的价值：

Here is my usage. I wrote #should stay same# to place that I don't want to change value of 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;
}

推荐答案

p>

This should work:

$('#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 锚。如果你有多个锚点，只需使用类选择器来选择它们。

This applies to the #add_comment_btn anchor. If you have multiple anchors, just use a class selector to select them all.

btw上面的代码基本上与你在答案中发布的代码相同。我刚刚摆脱了冗余。

btw the above code is basically the same as the code that you posted in your answer. I just got rid of the redundancy.

btw如果你不想添加类到锚点，你可以选择它们像这样：

btw if you don't want to add classes to the anchors, you can select them like so:

$('.bt_first, .bt_sec, .bt_third').parent().hover( .... the above code

这篇关于通过Jquery只更改背景图像的y pos的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！