0

我进行了很多搜索以获得帮助来回答以下问题：

将鼠标悬停在链接上时，我想用 jquery 更改 div 的图像背景位置。在 mouseOut 上，应保留当前位置。

用例：http: //jsfiddle.net/c9wN9/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/

非常感谢您，

坦率

4

1 回答 1

0

我没有包含动画，但这应该完全符合您的要求。

<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>
于 2013-05-01T20:42:16.023 回答