Disjointed Jquery Hover

Question

I am trying to do a disjointed jquery hover. When the user hovers the cursor over a menu item, an image in the sidebar should swap to a secondary image. However, I have been unable to get it to work.

Here is the jquery:

$('#main-menu li a').hover(function() {
    $("#vette").attr("src","images/vette2.png");
});

Here is the HTML

<div id="main-menu">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</div>


<div>
<img src="images/vette1.png" id="vette">
</div>

Answer 1

It should work, but if you want to restore the original if you leave the item, you need to add a second function:

$('#main-menu li a').hover(
 function() {$("#vette").attr("src","images/vette2.png");},
 function() {$("#vette").attr("src","images/vette1.png");}
);