在悬停时更改背景位置 - 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;和{{1}时，我想将background-position: 0px -200px;更改为background-position: 0px -300px;，b1和b2分别。

你可以看到我的小提琴here

我怎样才能做到这一点？

提前致谢... b3

blasteralfred

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

$(function(){
    $("#b1").hover(function(){
        $("#switch").css('background-position','0px 10px');
    });
    $("#b2").hover(function(){
        $("#switch").css('background-position','0px 20px');
    });
    $("#b3").hover(function(){
        $("#switch").css('background-position','0px 30px');
    });
});