Изменение только y pos фонового изображения через JQuery

Я хочу изменить положение фона изображения y с помощью функции зависания. Есть простой способ сохранить xpos или мне нужно сначала заняться позицией, разделить его и снова использовать с помощью $ .css().Изменение только y pos фонового изображения через JQuery

Я должен изменить положение фона в 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; 
}

источник

2011-02-04 Kemal

Похожие: http://stackoverflow.com/questions/2117594/adding- amount-to-background-position-on-click-jquery – thirtydot

@thirtydot Я не думаю, что это то же самое. Я хочу изменить только 3 разных класса. xpos должен оставаться предопределенным. Ваш пост говорит о чем-то другом. Я ошибаюсь? Спасибо, в любом случае. – Kemal

Kemal: Я сказал * подобный *, нет * тот же *. Этот вопрос имеет код для извлечения «фона-позиции», разделить два значения, изменить одно из значений и установить его обратно. Это то, что вы пытаетесь сделать. – thirtydot

Это должно работать:

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

В качестве backgroun d-позиция всегда сохраняется в порядке horizontal vertical, это должно работать, поскольку второе значение массива всегда является вертикальным значением.

Хотя это может работать только с одним элементом. С несколькими элементами вам может понадобиться использовать цикл.

источник

2011-02-04 16:39:16 acme

спасибо. Это работает, но хорошо, если бы я изменил только один фон. Мне нужно все изменить. У меня также есть несколько кнопок. etc.etc. это сложно. – Kemal

Я решил, что нет простого решения и найти выход в конце. Если кто-то нуждается в этом ниже, скрипт работает без проблем.

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

Вы должны иметь «а» тег с идентификатором «» в качестве родителя всех элементов, а также эти элементы должны быть первым Чайлдсом. В противном случае измените скрипт.

<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

Изменение только y pos фонового изображения через JQuery

ответ

Смежные вопросы