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?
You can animate the position of a background image as either 'backgroundPosition' or 'background-position' , providing both the horizontal and vertical offsets. $('#simpleBG'). css({'background-position': '0px 0px'}).
The background-position property sets the starting position of a background image. Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Here you go:
$(document).ready(function(){ $('#submenu li').hover(function(){ $('#carousel').css('background-position', '10px 10px'); }, function(){ $('#carousel').css('background-position', ''); }); });
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With