getBoundingClientRect() 返回 0，我做错了什么？

Question

I'm trying to make an <img> element move to another element ( <a> ) by first getting the position with getBoundingClientRect() and then to use those values to set the <img> element position on mouseover. But when I check the logs it's just spitting 0's. What am I doing wrong / overlooking?

 var clickers = document.querySelectorAll('.clicker'); var imgPreviewEle = document.getElementById('artistPreview'); clickers.forEach(function(clicker) { clicker.addEventListener('mouseover', function hover() { var elem = clicker.getBoundingClientRect(); console.log(elem); imgPreviewEle.style.display = "block"; imgPreviewEle.style.left = elem.left + 300 + 'px'; imgPreviewEle.style.top = elem.top - 300 + 'px'; }); }); clickers.forEach(function(clicker) { clicker.addEventListener('mouseleave', function hover() { var elem = clicker.getBoundingClientRect(); console.log(elem); imgPreviewEle.style.display = "none"; }); });

 .clicker { width: 100%; border-top: 2px solid transparent; border-bottom: 2px solid rgba(18.4, 31, 31, .5); } #artistPreview { z-index: 1010; position: fixed; clip: rect(290px, 600px, 620px, 0px); }

 <img id="artistPreview" src="" /> <div class="container"> <ul class="dropdown"> <li onMouseOver="show('A')" onMouseOut="hide('A')"> <a href="javascript:void(0)" style="font-weight: 600;">A</a> <ul id="A"> <a class="clicker" href="javascript:void(0)">ABBA</a> </ul> </li> </ul> </div>

Answer 1

I made some changes and left some comments. Let me know if you need more info:

 var clickers = document.querySelectorAll('.clicker'); var imgPreviewEle = document.getElementById('artistPreview'); // Hide the image from the start imgPreviewEle.style.display = "none"; clickers.forEach(function(clicker) { clicker.addEventListener('mouseover', function hover() { var elem = clicker.getBoundingClientRect(); imgPreviewEle.style.display = "block"; // Make sure the image appears nearby // Looks like the -300px you had here pushed the image off screen. imgPreviewEle.style.left = (elem.left + elem.width) + 'px'; imgPreviewEle.style.top = (elem.top + elem.height) + 'px'; console.log(elem); }); }); clickers.forEach(function(clicker) { clicker.addEventListener('mouseleave', function hover() { var elem = clicker.getBoundingClientRect(); console.log(elem); imgPreviewEle.style.display = "none"; }); });

 .clicker { width: 100%; border-top: 2px solid transparent; border-bottom: 2px solid rgba(18.4, 31, 31, .5); } #artistPreview { z-index: 1010; position: fixed; /* The image should not cover the mouseover field. */ pointer-events: none; }

 <. The image will need an SRC to be visible: > <img id="artistPreview" src="http.//placekitten.com/g/80/80" /> <div class="container"> <ul class="dropdown"> <: Removed some event handler refs that did not have definitions in code: > <li> <a href="javascript;void(0)" style="font-weight: 600;">A</a> <ul id="A"> <a class="clicker" href="javascript:void(0)">ABBA</a> </ul> </li> </ul> </div>

Answer 2

I am having similar problems. I cannot identify what is causing the problem. I actually get values when i use the body but any other element inside of the body shows 0