Quiero que un fragmento de texto siga al puntero del mouse, pero solo cuando el mouse se desplaza sobre una imagen. Hasta ahora funciona en parte: cuando el mouse accede al área de la imagen, el bloque de texto salta al puntero del mouse y permanece adjunto a él. Pero, desafortunadamente, cuando el mouse abandona el área de la imagen nuevamente, el texto permanece adjunto al mouse y sigue el puntero del mouse dondequiera que vaya. En su lugar, debería volver a su posición inicial.
El html relevante:
<main id="landing"> <div id='slider-block'> <img id='slider' class='my-image' src="img/my-image.jpg"> <div class="my-text"> Just some example text </div> </div> </main>Y el CSS relevante:
#slider-block { background-color: orange; } .my-image { background-color: red; padding: 30px; width: 50%; height: auto; } .my-text { position: absolute; top: 120px; left: 120px; width: 20%; }Y el contenido .js:
let sliderbody = document.querySelector('#slider'); sliderbody.onmouseover = function () { document.addEventListener('mousemove', function (e) { let titleblock = document.getElementsByClassName('my-text')[0]; titleblock.style.left = e.clientX + 'px'; titleblock.style.top = e.clientY + 'px'; } ); }Entonces, la pregunta es cómo terminar el texto que sigue al puntero del mouse cuando el mouse abandona la imagen del control deslizante.
Déjame saber si eso cumple con tus requisitos:
HTML
<main id="landing"> <div id='slider-block'> <img id='slider' width="500" class='my-image' src="https://images.unsplash.com/photo-1541363111435-5c1b7d867904?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZHVtbXl8ZW58MHx8MHx8&w=1000&q=80"> <div class="my-text"> Just some example text </div> </div> </main>CSS
#slider-block { position: relative; overflow: hidden; } .my-text { position: absolute; }JS
let sliderbody = document.querySelector('#slider'); sliderbody.onmouseover = function () { document.addEventListener('mousemove', function (e) { let titleblock = document.getElementsByClassName('my-text')[0]; console.log(titleblock); titleblock.style.left = e.clientX + 'px'; titleblock.style.top = e.clientY + 'px'; } ); }Como una solución muy simple, podría sentir cuándo el mouse abandona la imagen y, en ese momento, eliminar el detector de eventos para que x e y no se actualicen.
let sliderbody = document.querySelector('#slider'); function mousemoved(e) { let titleblock = document.getElementsByClassName('my-text')[0]; titleblock.style.left = e.clientX + 'px'; titleblock.style.top = e.clientY + 'px'; } sliderbody.onmouseover = function() { document.addEventListener('mousemove', mousemoved); } sliderbody.onmouseout = function() { document.removeEventListener('mousemove', mousemoved); } #slider-block { background-color: orange; } .my-image { background-color: red; padding: 30px; width: 50%; height: auto; } .my-text { position: absolute; top: 120px; left: 120px; width: 20%; } .my-text.follow {} <main id="landing"> <div id='slider-block'> <img id='slider' class='my-image' src="img/my-image.jpg"> <div class="my-text"> Just some example text </div> </div> </main>Esto simplemente deja el texto en su lugar final.