将鼠标悬停在导航项目上时显示图像

<div class="nav-item">
  <!-- 导航项目内容 -->
</div>

.nav-item {
  position: relative;
}

.nav-item:hover .image-container {
  /* 根据需要设置图像容器的样式，例如更改背景图片、显示浮动层等 */
}
.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

const navItem = document.querySelector('.nav-item');
const imageContainer = navItem.querySelector('.image-container');

navItem.addEventListener('mouseover', () => {
  imageContainer.style.opacity = 1;
});

navItem.addEventListener('mouseout', () => {
  imageContainer.style.opacity = 0;
});