3

我有一个图像精灵，它是主 div 的背景，里面有十几个链接。我不想在每个链接悬停时在 CSS 文件中写入背景位置的值，而是想在 jQuery 中执行此操作，以便背景位置 y 增加 550 像素（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', "");
    }
)

非常感谢大家！

4

4 回答 4

5

编辑后也可以在 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 的这个答案。

于 2012-08-20T15:14:11.933 回答
1

您最好将悬停和标准背景位置创建为单独的 CSS 规则，并使用addClassand removeClass。

$(".compass a").hover(
    function(){
        $(this).addClass('hoverIn');
    },
    function(){
        $(this).removeClass('hoverIn');
    }
);

CSS：

.compass a.hoverIn {
    background-position: 550px;
}
于 2012-08-20T15:05:26.943 回答
1

看看这个，为你新鲜制作。做这项工作。 http://jsfiddle.net/Anr24/

或者，在 CSS 中定义 :hover 属性不是更好吗？

祝你好运！

于 2012-08-20T15:15:00.903 回答
0

如果您想在背景位置值中添加任意数量，请尝试使用 +=X 和 -=X 其中 X 是要添加/删除的值。

我可能有更精细的细节错误，但类似这样：

$(".compass a").hover(
    function(){
    $(this).css('backgroundPosition', '+=50px')
},
function(){
    $(this).css('backgroundPosition', '-=50px');
}
)

...应该做的伎俩

这是一个快速的小提琴，向您展示我的意思：

http://jsfiddle.net/erinfreeman/Jj46m/

于 2012-08-20T15:20:35.640 回答