javascript - 如何使用 JavaScript 使鼠标悬停时图像变大？

Question

我想当鼠标移到图像上时使图像变大，然后恢复正常。使用 JavaScript 中的 getPhoto 函数可以很好地以正常大小加载图像，但是当我将鼠标悬停在它上面时，没有任何反应。

我做错了什么？

document.getElementById("photo").onmouseover = function() {
  mouseOver()
};
document.getElementById("photo").onmouseout = function() {
  mouseOut()
};

function getPhoto(handle) {
  var img = new Image();
  var div = document.getElementById("photo");
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
  img.src = "https://res.cloudinary.com/harmhxmnk/image/upload/" + handle;
  img.height = 32;
  img.onload = function() {
    div.appendChild(img);
  };
}

function mouseOver() {
  var img = document.getElementById("photo");
  img.height = 100;
}

function mouseOut() {
  // TODO
}

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
}

<div class="photo" id="photo"></div>

Answer 1

不需要 JS 恕我直言:-)

.photo {
  position: absolute;
  top: 86px;
  right: 92px;
  transform: scale(1);
  transition: transform .5s;
}

.photo:hover {
  transform: scale(1.2);
}

<div class="photo" id="photo"><img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" /></div>