使用jQuery在CSS中为所有元素更改sprite的背景位置

Question

我有一个图像精灵,它是主div的背景,里面有十几个链接.我想在jQuery中使用jQuery,而不是在每个链接的CSS文件中写入背景位置的值,以便背景位置y增加550px(x位置将保持不变).

标记:

<div class="compass">
    <a class="facebook" href="#">&nbsp;</a>
    <a class="twitter" href="#">&nbsp;</a>
    <a class="youtube" href="#">&nbsp;</a>
</div>

CSS:

.compass {
    background-image: url('../images/compass.png');
    background-position: top;
    height: 550px;
    position: relative;
    width: 567px;
    margin: 0 auto;
}
.compass a{
    background-image: url('../images/compass.png');
    background-position: top;
    display: block;
    position: absolute;
}
a.facebook {
    height: 51px;
    width: 26px;
    left: 151px;
    top: 190px;
}

因此,我们的想法是为每个链接编写一个CSS规则样式,指示背景图像的x和y位置.然后,在悬停时,y位置将增加550px.在mouseout上,它会回到热点(减少550px).

我已经启动了jQuery语法,但无法弄清楚:

var originalPosition = obj.css('background-position');
$(".compass a").hover(
    function(){
        $(this).css('backgroundPosition', originalPosition + 550 + "px")
    },
    function(){
        $(this).css('backgroundPosition', "");
    }
)

非常感谢你们!

Answer 1

也被编辑在FF工作.

$(".compass a").hover(function() {
    var bgpos = $(this).css('backgroundPosition').split(' ');
    $(this).css('backgroundPosition', bgpos[0] + ' ' + (parseInt(bgpos[1],10)+550) + 'px');
}, function() {
    var bgpos = $(this).css('backgroundPosition').split(' ');
    $(this).css('backgroundPosition', bgpos[0] + ' ' + (parseInt(bgpos[1],10)-550) + 'px');
});

小提琴

归功于FF hack的这个答案.