Changing only y pos of background image via Jquery

Question

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

Answer 1

I decided there is no simple solution and find a way out at the end. If somebody needs this below script works with no problem.

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

You should have an "a" tag with an "id" as parent of all elements and also these elements must be first childs. Otherwise modify script.

  Comments