使用 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

此标签的任何父标签都应具有 width/height 的固定 px 值。

你能检查一下你是否在页面的任何地方为父级设置了width/height吗？

Answer 2

请检查此代码

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

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

Enlarge image through mouseover using JavaScript

html

javascript

css

image

mouseover