Rollover getting li backgroundPosition
Hi there,
I am new to jquery and I was wondering if anybody is able to help me out with the following query:
How do I return a lists background-image's backgroundPosition?
I am trying to achieve a navigation menu whereby, when the li element is rolled over a grey square moves under the li element. Here is what I have done so far:
-
<script type="text/javascript">
$(document).ready(function(){
$('ul.nav').css({'background' : 'url(img/shoot.gif) no-repeat 0 30', 'height' : '35'});
$('li.homer').mouseover(function() {
$('ul.nav').stop().animate({'backgroundPosition' : 'not sure what to put here'}, {duration:1000});
}
);
$('li.homer').mouseout(function() {
$(this).stop().animate({'backgroundPosition' : 'not sure what to put here'}, {duration:200});
}
);
});
</script>
So when the li element is rolled over I want to be able to identify said li backgroundPosition and use that value to move the ul's background image.
I realise that this could be done simply by giving each li element a different class name then giving it a mouseover function, but this is for a dynamic Wordpress nav bar so each li element does not have a unique class name.
Any help would be greatly appreciated.
Thanks
Chris