仅使用CSS和HTML悬停在不同图像上时，如何显示不同的文本？

<div id="image-container"></div>

#image-container {
  width: 200px;
  height: 200px;
  background-image: url('image1.jpg');
  background-size: cover;
}

#image-container:hover {
  background-image: url('image2.jpg');
}

#image-container:hover::before {
  content: "Text for image2";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
}

var imageContainer = document.getElementById('image-container');

imageContainer.addEventListener('mouseover', function() {
  // Get the corresponding text for the hovered image
  var text = "Text for image1"; // Replace with actual text retrieval logic
  
  // Display the text in a suitable position
  var textElement = document.createElement('div');
  textElement.textContent = text;
  // Set the position and style of the textElement
  // ...
  
  imageContainer.appendChild(textElement);
});

imageContainer.addEventListener('mouseout', function() {
  // Remove the displayed text when mouse is moved away
  var textElement = imageContainer.querySelector('div');
  if (textElement) {
    imageContainer.removeChild(textElement);
  }
});