Change background position with jQuery

Question

I'd like to change the background position of a CSS-class while hovering a li-element.

HTML:

<div id="carousel">     <ul id="submenu">         <li>Apple</li>         <li>Orange</li>     </ul> </div> 

CSS:

#carousel {      float: left;     width: 960px;     height: 360px;     background: url(../images/carousel.png); } 

Any suggestions on how to do this?

Answer 1

Here you go:

$(document).ready(function(){     $('#submenu li').hover(function(){         $('#carousel').css('background-position', '10px 10px');     }, function(){         $('#carousel').css('background-position', '');     }); }); 

Answer 2

You guys are complicating things. You can simple do this from CSS.

#carousel li { background-position:0px 0px; } #carousel li:hover { background-position:100px 0px; }