javascript - 使用 JavaScript 通过鼠标悬停放大图像

Question

作为作业的一部分，我必须使用 JavaScript 通过鼠标悬停来放大图像。然而，当图像放大时，它不应移动页面上的任何其他元素。当鼠标从图像上移开时，它应该恢复到原始大小。

这是我到目前为止的代码，但它似乎什么也没做。

function imageEnlarge() {

 document.getElementById('1').style.height=100%;
 document.getElementById('1').style.width=100%;
 document.getElementById('1').style.position='absolute';
 }

function imageReset()   { 

 document.getElementById('1').style.height=80%;
 document.getElementById('1').style.width=80%;
 document.getElementById('1').style.position='absolute';
}

<img src="home2.jpg" class="homeimage" alt="View of a beach"
                 id="1" onmouseover="imageEnlarge();" onmouseout="imageReset();"

关于我哪里出错的任何想法。我的老师的反馈并不是最好的，所以我完全不知道该去哪里。

Answer 1

请检查此代码

function imageEnlarge() {
 document.getElementById('1').style.height="100%";
 document.getElementById('1').style.width="100%";
 document.getElementById('1').style.position='absolute';
 }
function imageReset() {

 document.getElementById('1').style.height="80%";
 document.getElementById('1').style.width="80%";
 document.getElementById('1').style.position='absolute';
 }