更改div的背景位置，jQuery的

Question

我搜索了很多得到帮助回答以下问题：

我想换一个div的图像，背景位置jquery悬停在链接上时。 在mouseOut上，应保留当前位置。

使用案例：http://jsfiddle.net/c9wN9/1/

我有四个不同的“状态”精灵形象。 在页面加载时，显示图像状态1（位置0 0）。

通过悬停在四个不同的链接上（位置0 0/0 100/0 200/0 300），背景位置应该相应地改变，并将其当前位置保持在mouseOut上。

此外，图像更改可以通过fadeIn/fadeOut进行动画，并且当前活动位置可以在链接上可见。 （上<a>活动类？）

HTML结构：

<div id="background"></div> 
<a id="link1" href="#">State 1</a> 
<a id="link2"href="#">State 2</a> 
<a id="link3"href="#">State 3</a> 
<a id="link4"href="#">State 4</a> 

CSS

#background { 
height: 100px; 
width: 100px; 
} 

jQuery的

? 

我做了基础知识的jsfiddle，并希望为您的jQuery支持： http://jsfiddle.net/c9wN9/1/

非常感谢你提前，

坦率

Answer 1

我不包括动画，但这应该做你寻找什么。

<style> 
#background { 
height: 100px; 
width: 100px; 
background-img:('foo.png')} 
#background.hover1{background-position:0px 0px} 
#background.hover2{background-position:0px 100px} 
#background.hover3{background-position:0px 200px} 
#background.hover4{background-position:0px 300px} 
</style> 

<div id="background"></div> 
<a id="hover1" class="trigger" href="#">State 1</a> 
<a id="hover2" class="trigger" href="#">State 2</a> 
<a id="hover3" class="trigger" href="#">State 3</a> 
<a id="hover4" class="trigger" href="#">State 4</a> 

<script> 
$(".trigger").hover(function(){ 
// get hover class 
var hoverClass = $(this).attr('id'); 
// remove active class from any trigger link 
$(".trigger").removeClass('active'); 
// add active class to current trigger link 
$(this).addClass('active'); 
// add hover class to the background div to shift the background position 
$("#background").removeClass().addClass(hoverClass); 
}); 
</script>