Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change background position with jQuery

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?

like image 264
Mats Avatar asked Nov 21 '09 22:11

Mats


People also ask

How to set background position in jQuery?

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'}).

How to position the css background image?

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.


2 Answers

Here you go:

$(document).ready(function(){     $('#submenu li').hover(function(){         $('#carousel').css('background-position', '10px 10px');     }, function(){         $('#carousel').css('background-position', '');     }); }); 
like image 198
rebellion Avatar answered Sep 30 '22 07:09

rebellion


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; } 
like image 21
Marius Iordache Avatar answered Sep 30 '22 05:09

Marius Iordache