[jQuery] use .each? hover over list items to change contents of div

[yaayme]

So, I have a ul list like so:

<ul id="fruits">
        <li id="apple">apple</li>
        <li id="orange">orange</li>
        <li id="grape">grape</li>
</ul>

I also have a div that is currently displaying an image of an apple using a
background image:

<div id="fruit-display"></div>

where

#fruit-display {background: url(images/image_apple.jpg)}

I want to be able to change the image as I hover over the different items on
the list.

I have something like this:

        $('#fruits li').mouseover(function() {
                id = $(this).attr('id');
                menuId = '#' + id
                image = 'url(images/image_' + id + '.jpg)'
               
                $(menuId).mouseover(function(){
                        $('#fruit-display').css("backgroundImage", image);
                });
        });
       
but, of course, those images won't be ready until after you've hovered over
a list item.

I mean, I can hover over orange, but it will still show an image of the
apple until I hover over another fruit and then back again on orange. How
can I get the orange to show up exactly when I hover over the list item
called orange?

Thanks much!
-- 
View this message in context: 
http://www.nabble.com/use-.each--hover-over-list-items-to-change-contents-of-div-tp20054196s27240p20054196.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.