Change background position with jQuery

Asked 2009-11-21T22:09:46.040

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?

jquery css background-position

Edit Report

2 Answers

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

answered 2010-04-11T12:10:49.980

$('#submenu li').hover(function(){
    $('#carousel').css('backgroundPosition', newValue);
});

answered 2009-11-21T22:11:45.847