CODEWITHSUNDEEP
jquerycssbackground-imagebackground-positionjquery-hover
aiternal
aiternal

Reputation: 1100

Changing only y pos of background image via Jquery

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 $.css() again.

I should change all 3 span's background position if somebody hover's any of them. So bt_first:hover not seems usable.

Here is my usage. I wrote #should stay same# to place that I don't want to change value of 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'});
});

Here is my 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>

And 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;
}

Upvotes: 6

Views: 4343

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 185933

This should work: 

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

This applies to the #add_comment_btn anchor. If you have multiple anchors, just use a class selector to select them all.

btw the above code is basically the same as the code that you posted in your answer. I just got rid of the redundancy.

btw if you don't want to add classes to the anchors, you can select them like so: 

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

Upvotes: 3

aiternal
aiternal

Reputation: 1100

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.

<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>

Upvotes: 0

acme
acme

Reputation: 14856

Maybe like this:

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

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

As the background-position is always stored in the order horizontal vertical this should work as the second array value is always the vertical value.

Though this may only work with one element. With multiple elements you may have to use a loop.

Upvotes: 0

Related Questions