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

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


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.