js菜单图片放大效果

<div class="menu">
  <div class="menu-item">
    <img src="image1.jpg" alt="Image 1" class="menu-image">
  </div>
  <div class="menu-item">
    <img src="image2.jpg" alt="Image 2" class="menu-image">
  </div>
  <!-- 更多菜单项 -->
</div>

.menu {
  display: flex;
  justify-content: space-around;
}

.menu-item {
  overflow: hidden;
  width: 100px; /* 设置固定宽度 */
  height: 100px; /* 设置固定高度 */
}

.menu-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

.menu-item:hover .menu-image {
  transform: scale(1.2); /* 放大1.2倍 */
}

document.querySelectorAll('.menu-item').forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.querySelector('.menu-image').style.transform = 'scale(1.2)';
  });
  item.addEventListener('mouseleave', () => {
    item.querySelector('.menu-image').style.transform = 'scale(1.0)';
  });
});