使用 jQuery 更改悬停时的背景位置

Question

我的页面上有如下 div：

<div id="switch">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
</div>

样式为：

#switch{
    background-position: 0px 0px;
    width: 300px;
    height: 100px;
    background-image: url(test.png);
    background-repeat: no-repeat;
}
#b1{
  width: 100px;
  height: 100px;
}
#b2{
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: -100px;
}
#b3{
  width: 100px;
  height: 100px;
  margin-left: 200px;
  margin-top: -100px;
}

当用户将鼠标悬停在

background-position

、

background-position: 0px -100px;

和

background-position: 0px -200px;

上时，我想将

background-position: 0px -300px;

分别更改为

b1

、

b2

和

b3

。

你可以在这里看到我的小提琴。

我怎样才能做到这一点？

Answer 1

var $switch = $('#switch');
$('#b1').hover(function() {
    $switch.css({
        backgroundPosition: '0px -100px'
    })
}, function() {
    $switch.css({
        backgroundPosition: '0 0'
    })
}
)

这是为

#b1

完成的，您可以为其他人做同样的事情。

查看工作示例http://jsfiddle.net/MFJDE/3/

Answer 2

$(函数(){
    $("#b1").hover(函数(){
        $("#switch").css('背景位置','0px 10px');
    });
    $("#b2").hover(函数(){
        $("#switch").css('背景位置','0px 20px');
    });
    $("#b3").hover(函数(){
        $("#switch").css('背景位置','0px 30px');
    });
});