Selecting correct element

Selecting correct element

Hi all, just started learning jquery literally two days ago and have no real grounding in javascript (or programming in general, really), so apologies if I start rambling or if the topic title is not accurate. One of the biggest issues I've found is not knowing the correct terminology to search for for advice. Google tends to lose accuracy after entering the equivalent of a novel in the search bar ;)

I have a basic navigation containing 3 li's. On mouseover, each li creates a new div, with a unique id. The div created contains a css sprite and each id relates to a different background-position. Ideally, as the mouse enters and exits an li the background image fades in and out then removed from the DOM, and, ideally, when one travels directly from li to li the transition should be smooth. However, in practice several div's can be created if mouse over and out occurs before the fadeout and subsequent removal occurs. It is not known what id's they may have - a user could mouseover and out of the same li a couple of times before moving to another li, creating two of the same and one unique. This has lead to my example, on testing, removing all div's when the first timer expires. This can be seen here:


I have also created a version where I explicitly declare each div in the script, as a sort of 'ideal' result:


A theory I had was to add, with jquery, an id to the li's, the id of which will be the number of the li based on order (first = 1, second = 2 etc). I could then generate one div containing the sprite and the background postion be determined by multiplying the lowest common denominator (i.e. the height of one frame of the sprite = 170px) by the newly generated li id. For example, on hovering over the first li, the background position would be moved 1 * 170px = 170px, the second 2 * 170px = 340px etc. Of course, the issue here is that in css2 and up you cannot have a class or id beginning with a digit (as far as I know). 

I would prefer to have a script that does not rely on explicit references, to make expansion of the nav easier in the future, plus it *should* keep the code lighter. Can anyone either:

1. Suggest how I can track each div created? 

2. Suggest a better method to achieve the result I'm after with implicit references. 

At the moment I can't see the wood for the trees - but this may be sleep deprivation and a fresh pair of eyes may help. Again, apologies for rambling.

Thanks in advance.