Разрозненный Jquery Hover

Question

Я пытаюсь сделать несвязанный jquery hover.Когда пользователь наводит курсор на элемент меню, изображение на боковой панели должно переключаться на дополнительное изображение.Однако мне не удалось заставить его работать.

Вот jquery:

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

Вот 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

Должно сработать, но если вы хотите восстановить оригинал, если оставляете предмет, вам нужно добавить вторую функцию:

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