通过jquery改变背景图像的位置

我想用悬浮功能改变按钮的背景图像y位置。有没有简单的方法来保持xpos或者我应该先获取位置，然后再次使用$ .css（）重新分割并再次使用。通过jquery改变背景图像的位置

如果有人悬停其中任何一个，我应该更改所有3个span的背景位置。所以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; 
}

来源

2011-02-04 Kemal

类似：http://stackoverflow.com/questions/2117594/adding-金额对背景位置点击jquery – thirtydot 2011-02-04 16:18:10

@thirtydot我不认为它是相同的。我只想改变3个不同类的ypos。 xpos应该保持预定义。你的文章谈论别的东西。我错了吗？不管怎么说，还是要谢谢你。 – Kemal 2011-02-04 16:21:01

这应该工作：

$('#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锚。如果您有多个锚点，只需使用类别选择器将其全部选中即可。

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

顺便说一句，如果你不想类添加到锚，你可以像这样选择它们：

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

来源

2011-02-05 00:14:41

也许这样：

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

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

由于背景d位置始终以horizontal vertical的顺序存储，因此第二个数组值总是垂直值。

虽然这可能只适用于一个元素。对于多个元素，您可能必须使用循环。

来源

2011-02-04 16:39:16 acme

我决定没有简单的解决方案，并在最后找到出路。如果有人需要下面的脚本，没有问题。

$('.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 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-04 23:27:55 Kemal

通过jquery改变背景图像的位置

回答

相关问题