在悬停时更改div中的图片(带边框)

<div id="imageContainer">
  <img src="original-image.jpg" alt="Original Image">
</div>

#imageContainer {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

#imageContainer img {
  width: 100%;
  height: 100%;
}

var imageContainer = document.getElementById("imageContainer");
var image = imageContainer.getElementsByTagName("img")[0];

imageContainer.addEventListener("mouseover", function() {
  image.src = "hover-image.jpg";
  imageContainer.style.border = "2px solid #f00";
});

imageContainer.addEventListener("mouseout", function() {
  image.src = "original-image.jpg";
  imageContainer.style.border = "1px solid #ccc";
});