使用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';
 }

Answer 2

此标记的任何父级都应具有固定的宽度/高度px值。

您可以检查是否在页面的任何位置设置了父级的宽度/高度。