jquery - 使用 jQuery 为所有元素更改 CSS 中 Sprite 的背景位置

Question

我有一个图像 sprite，它是主 div 的背景，里面有十几个链接。我不想在悬停时为每个链接在 CSS 文件中写入背景位置的值，而是想在 jQuery 中执行此操作，以便背景位置 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 位置将增加 550 像素。在鼠标移出时，它会回到原来的热状态(减少 550 像素)。

我已经开始学习 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');
});

Fiddle

归功于 this answer对于 FF hack。