Change div's background position when hovering a link and keep the position by mouseout, jQuery

I've searched a lot to get help to answer the following question:

I would like to change a div's image-background position with jquery when hovering over a link. On mouseOut, the current position should be kept.

Use Case: http://jsfiddle.net/c9wN9/1/

I have a sprite image with four different "states". On page load, image state one (position 0 0) is shown.

By hovering over four different links (position 0 0 / 0 100 / 0 200 / 0 300) the background-position should change accordingly and keep its current position on mouseOut.

Additionally, the image change could be animated by fadeIn / fadeOut and the current active position could be made visible on the link. (active class on the <a>?)

HTML Structure:

<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

?

I made a jsfiddle with the basics and are hoping for your jQuery support: http://jsfiddle.net/c9wN9/1/

Thank you very much in advance,

frank

Answers


I didn't include animations, but this should do exactly what you're looking for.

<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>

Need Your Help

Make Image Wrap Around Screen Edge using CMMotionManager?

ios objective-c

What I am trying to accomplish is moving a UIImageView to the top edge of the iPhone's screen and then keep moving it up, but once the image passes the top edge, have it appear at the bottom of the

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.