jquery - 鼠标悬停时更改下拉菜单中的图像

Question

我有一个下拉菜单，我想要的是当链接悬停时在下拉菜单的右侧显示图像，每个链接都会有不同的图像，所以当链接悬停时，图像应该自动改变，当有没有悬停效果，它应该回到一个固定的图像。

关于如何使这种效果发挥作用的任何想法

在这个部分：

<div class="menu">
<div class="left-menu-section">
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
<li><a href="#">Product 4</a></li>
</ul>
</div>
<div class="right-menu-image-section">
<img src="" alt=""/>
</div>
</div>

当鼠标悬停在左侧部分提供的链接上时，我想在右侧部分显示图像。任何帮助或建议将不胜感激。谢谢

Answer 1

$img = $(".right-menu-image-section img");

var old_img = $img.attr('src');

$(".left-menu-section li").hover(function(){
    // need to implement some logic for getting new image
    // set new image
    $img.attr(src, new_img);
}, function(){
    // reset the original image
    $img.attr(src, old_img);
});