Estoy tratando de hacer que un elemento <img> se mueva a otro elemento ( <a> ) obteniendo primero la posición con getBoundingClientRect() y luego usando esos valores para establecer la posición del elemento <img> al pasar el mouse. Pero cuando reviso los registros, solo arroja 0. ¿Qué estoy haciendo mal / pasando por alto?
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>Hice algunos cambios y dejé algunos comentarios. Hágame saber si necesita más información:
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>