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?
Here you go:
$(document).ready(function(){
$('#submenu li').hover(function(){
$('#carousel').css('background-position', '10px 10px');
}, function(){
$('#carousel').css('background-position', '');
});
});