设置 position<div> 在运行时</div><div id="text_translate"><p>在鼠标悬停时，我想将“imgbox”移动到特定的绝对 position（这可能会将其移动到“i”图像的顶部）。</p><p> 第二个图像（“newimg”）加载，因此该部分工作（包括再次将其隐藏在“onmouseout”中）但它显示在所有内容下方（如 HTML 代码中）。 似乎设置imgbox.style.left和imgbox.style.top没有做任何事情。 如果我改为设置“边距”，则图像将显示在右侧 200 像素处，并从原来的位置向下 200 像素（但仍低于其他所有内容）。</p><p> 我错过了什么？ 如何在运行时使用常规 Javascript 移动“imgbox”（请不要 JQuery？）？ </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function onHoverIn(url) { var imgbox = document.getElementById("imgbox"); imgbox.style.visibility='visible'; var newimg = document.createElement("img"); newimg.src = url; var oldimg = document.getElementById("i"); /*if(oldimg.addEventListener){ //Removed so the snippet'll run oldimg.addEventListener('mouseout',onHoverOut,false); } else { oldimg.attachEvent('onmouseout',onHoverOut); }*/ imgbox.innerHTML=''; imgbox.appendChild(newimg); imgbox.style.left = '200px'; imgbox.style.top = '200px'; //imgbox.style.marginLeft = '200px'; //imgbox.style.marginTop = '200px'; }</pre><pre class="snippet-code-css lang-css prettyprint-override"> #imgbox { position: absolute; border: 1px solid #999; background: #FFFFFF; filter: Alpha(Opacity=100); visibility: hidden; z-index: 50; overflow: hidden; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"&gt; &lt;p&gt;Long Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;END TEEEEEEEEEEEXT&lt;/p&gt; &lt;div id="imgbox"&gt;&lt;/div&gt;</pre></div></div><p></p><p> 抱歉，图片很大，所以不知道效果如何。 我用 Firefox 85.0、Chrome 88、IE 和 Edge 测试了代码，只需双击 .html 文件，定位在其中任何一个都不能正常工作。</p></div>

Question

On mouseover I want to move the "imgbox" to a specific absolute position (which might move it on top of the "i" image).

The second image ("newimg") loads, so that part works (including hiding it again in "onmouseout") but it's displayed below everything (like in the HTML code). It seems like setting imgbox.style.left and imgbox.style.top doesn't do anything. If I set "margin" instead, the image is displayed 200px to the right and 200px down from where it originally was (but still below everything else).

What did I miss? How do I move the "imgbox" at runtime with regular Javascript (no JQuery please?)?

 function onHoverIn(url) { var imgbox = document.getElementById("imgbox"); imgbox.style.visibility='visible'; var newimg = document.createElement("img"); newimg.src = url; var oldimg = document.getElementById("i"); /*if(oldimg.addEventListener){ //Removed so the snippet'll run oldimg.addEventListener('mouseout',onHoverOut,false); } else { oldimg.attachEvent('onmouseout',onHoverOut); }*/ imgbox.innerHTML=''; imgbox.appendChild(newimg); imgbox.style.left = '200px'; imgbox.style.top = '200px'; //imgbox.style.marginLeft = '200px'; //imgbox.style.marginTop = '200px'; }

 #imgbox { position: absolute; border: 1px solid #999; background: #FFFFFF; filter: Alpha(Opacity=100); visibility: hidden; z-index: 50; overflow: hidden; }

 <img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"> <p>Long Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br><br><br><br><br>END TEEEEEEEEEEEXT</p> <div id="imgbox"></div>

Sorry, the images are pretty big, so not sure how well it'll work. I tested the code with Firefox 85.0, Chrome 88, IE and Edge by simply double-clicking the.html file and the positioning doesn't work properly in any of them.

Answer 1

This was quite a bit harder than I thought it would be, made some changes to your code. Hope this still works for you.

NOTE: I implemented an onHoverOut locally and noticed that when I moved my mouse around on the image it would flicker. This happens because the new image is loaded and once moving again the old image registers a onHoverOut (because you hover on top of the new image) which would then remove the new image, at which point the old image registers the onmouseover again and adds the new image. This would keep looping for as long a you move the mouse around.

 function onHoverIn(url) { var imgbox = document.getElementById("imgbox"); imgbox.style.visibility='visible'; var newimg = document.createElement("img"); newimg.src = url; var oldimg = document.getElementById("i"); if(oldimg.addEventListener){ oldimg.addEventListener('mouseout',onHoverOut,false); } else { oldimg.attachEvent('onmouseout',onHoverOut); } //imgbox.innerHTML=''; imgbox.appendChild(newimg); } function onHoverOut() { console.log('onHoverOut: not implemented'); }

 .article{ width:640px; padding:0 16px; }.image-box{ position:relative; width:100%; height:0; /* 16:9 */ padding-top:56.25%; overflow:hidden; }.image-box img{ position:absolute; top:0; width:100%; }

 <div class="article"> <p>content before..</p> <div id="imgbox" class="image-box"> <img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"> </div> <p>content after..</p> </div>