Изменение только y pos фонового изображения через Jquery - PullRequest
Новая
       11

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

6 голосов
/ 04 февраля 2011

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

Мне следует изменить фоновую позицию всех 3-х диапазонов, если кто-нибудь наводит на них курсор Итак, bt_first: hover не может быть использован.

Вот мое использование. Я написал # должен остаться таким же # чтобы указать, что я не хочу менять значение 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;
}

Ответы [ 3 ]

3 голосов
/ 05 февраля 2011

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

$('#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
0 голосов
/ 05 февраля 2011

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

$('.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» в качестве родителя всех элементов, а также эти элементы должны быть первыми дочерними элементами. В противном случае измените скрипт. 

<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>
0 голосов
/ 04 февраля 2011

Может быть так: 

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

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

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

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

...