js实现鼠标悬停放大

在JavaScript中，实现鼠标悬停时图片或其他元素放大的效果通常通过CSS样式结合JavaScript事件监听来完成。下面是一个简单的示例：

HTML部分：

<img src="your-image.jpg" class="hover-zoom" alt="Your Image">

CSS部分（为了简单起见，这里使用了CSS3的`:hover`伪类）：

.hover-zoom {
  width: initial;
  height: initial;
  transition: transform 0.5s ease; /* 添加平滑的过渡效果 */
}

.hover-zoom:hover {
  transform: scale(1.1); /* 图片放大10% */
}

JavaScript部分（虽然CSS已经实现了基本的效果，但在某些场景下可能会需要额外的交互处理，如禁用默认的悬停效果等）：

// 如果有特殊需求，可以在JavaScript中添加事件监听
const img = document.querySelector('.hover-zoom');
img.addEventListener('mouseover', function() {
  this.style.transform = 'scale(1.1)';
});
img.addEventListener('mouseout', function() {
  this.style.transform = '';
});