JavaScript鼠标悬停图片放大

在JavaScript中，创建一个简单的图片悬停放大的效果通常涉及CSS样式配合JavaScript事件处理。以下是实现这个功能的一个基本步骤：

1. **HTML结构**:

<img src="image.jpg" class="zoomable" alt="Image">
<div class="overlay"></div>

在这里，`zoomable` 类用于标记需要放大的图片，`overlay` 则是一个隐藏的遮罩层。

2. **CSS样式**:

.zoomable {
  transition: transform 0.5s ease;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.zoomed {
  transform: scale(1.2);
}

当图片被鼠标悬停时，`.zoomed` 类会被添加，导致图片放大。

3. **JavaScript事件处理**:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const img = document.querySelector('.zoomable');
  const overlay = document.querySelector('.overlay');

  img.addEventListener('mouseover', function(e) {
    overlay.style.display = 'block';
    img.classList.add('zoomed');
  });

  img.addEventListener('mouseout', function(e) {
    overlay.style.display = 'none';
    img.classList.remove('zoomed');
  });
});
</script>

这段代码监听图片元素的 `mouseover` 和 `mouseout` 事件，当鼠标进入图片时显示遮罩并放大图片，离开时恢复原状。