js鼠标移到小图上显示相应的大图

<div class="thumbnail">
  <img src="small-image.jpg" alt="Small Image" onmouseover="showLargeImage('large-image.jpg')" onmouseout="hideLargeImage()">
</div>
<div id="largeImageContainer" class="large-image-container">
  <img id="largeImage" src="" alt="Large Image">
</div>

.thumbnail {
  display: inline-block;
  margin: 10px;
}

.large-image-container {
  position: absolute;
  display: none;
  padding: 10px;
  background: white;
  border: 1px solid #ccc;
}

function showLargeImage(imageUrl) {
  document.getElementById('largeImage').src = imageUrl;
  document.getElementById('largeImageContainer').style.display = 'block';
}

function hideLargeImage() {
  document.getElementById('largeImageContainer').style.display = 'none';
}