Question

我刚刚开始使用sprite来减少HTTP请求，而且我将旧脚本转换为处理我的悬停动画到新系统时遇到了一些问题。我真的不想为每个按钮设置单独的功能，因为这很痛苦，特别是按钮的数量，甚至复制和粘贴都会很痛苦。我不相信这是最有效的做事方式，不是长远而且效率是目标。

我已经用它做到了这一点：

$(".socButton").hover(function(){
        var iD = $(this).attr("id");

        var pos = $("#" + iD).css("background-position");

        var splitPos = pos.split("px");

        splitPos[0] = parseInt(splitPos[0]) += 24;

        newPos = splitPos.join("px");

        alert(newPos);

}, function(){

});

但newPos变量没有提醒。我尝试了一些更简单的方法来改变“background-position-x”但没有骰子。

我不确定我需要识别元素的id才能更改它，但它是在样式表中具有背景位置的id，而不是类，所以我不确定。

任何指导都非常感谢。

提前致谢。

编辑：我觉得我也应该指出，在我添加parseInt之前它已经提醒了，但在我添加它之前会出现一些糟糕的结果。

Answer 1

不，您不需要元素的ID。 jQuery应用内联样式。

无论如何，如果你的CSS中有.socButton的第二条规则可能会更容易，即.socButton.hover，它具有悬停状态的正确背景位置。在jQuery中，您只需要使用hover切换$(this).toggleClass('hover')类。

http://jsfiddle.net/Rn6f4/

$(".socButton").hover(function() {
    var pos = $(this).css("background-position");

    var splitPos = pos.split("px");

    splitPos[0] = parseInt(splitPos[0]);
    splitPos[0] += 24.0;

    newPos = splitPos.join("px");

    alert(newPos);
    $(this).css({"background-position": newPos});

}, function(){

});

使用jQuery / Javascript更改背景位置中的“x”：“x”px“y”px

1 个答案: