当鼠标悬停在不同的链接上时如何改变菜单图像？

<div class="menu">
  <a href="#" class="link" data-image="image1.jpg">Link 1</a>
  <a href="#" class="link" data-image="image2.jpg">Link 2</a>
  <a href="#" class="link" data-image="image3.jpg">Link 3</a>
</div>
<img src="default.jpg" id="menu-image">

.link:hover {
  color: blue; /* 改变链接的颜色 */
}

// 获取菜单链接和菜单图像元素
const links = document.querySelectorAll('.link');
const menuImage = document.getElementById('menu-image');

// 为每个链接添加鼠标悬停事件监听器
links.forEach(link => {
  link.addEventListener('mouseover', () => {
    const image = link.getAttribute('data-image');
    menuImage.src = image; // 改变菜单图像的路径
  });
});