通過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改變背景圖像的位置

回答

相關問題