如何在菜单项悬停时更改身体背景图像？

<ul class="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>

<div class="body-content">
  <!-- 身体内容 -->
</div>

.menu li:hover {
  /* 菜单项悬停效果 */
  background-color: #f0f0f0;
}

.body-content {
  /* 默认身体背景图像 */
  background-image: url("默认图像链接地址");
}

.menu li:hover ~ .body-content {
  /* 菜单项悬停时更改身体背景图像 */
  background-image: url("新图像链接地址");
}

var menuItems = document.querySelectorAll('.menu li');
var bodyContent = document.querySelector('.body-content');

menuItems.forEach(function(item) {
  item.addEventListener('mouseover', function() {
    bodyContent.style.backgroundImage = 'url("新图像链接地址")';
  });

  item.addEventListener('mouseout', function() {
    bodyContent.style.backgroundImage = 'url("默认图像链接地址")';
  });
});