Quiero que estas imágenes se muestren al pasar el cursor sobre el título, además de eso, cuando paso el cursor por el título y muevo el cursor, quiero que la imagen siga al cursor. Soy nuevo en JavaScript, cualquier ayuda de ustedes sería muy apreciada.
.container { display: inline-block; } .manImg { display: none; } .manImg2 { display: none; } .hover-text { color: black; text-align: center; font-size: 50px; letter-spacing: 5px; line-height: 3px; font-family: Odachi; } .hover-text:hover { color: red; } .hover-text:hover~.manImg2 { display: block; top: 0px; left: 0px; right: 0px; height: 100%; width: 100%; background: url(https://awallpaperaday.com/wp-content/uploads/2019/03/orange-cliffs-1920x1080-1860x1046.jpg) center; background-size: cover; position: fixed; z-index: -9999999999; } .hover-text:hover~.manImg { display: block; top: 0px; left: 0px; right: 0px; height: 100%; width: 100%; background: url(https://th.bing.com/th/id/R.1084082127f8d9d45194657db272109e?rik=6tKaSe%2b57Mvvkg&riu=http%3a%2f%2fimages.freehdw.com%2f510%2f3d-abstract_widewallpaper_fulfill-wish_50806.jpg&ehk=Tlkf5BUKl0223C4FgHOuHAHIe5tedec%2bWhkhyj5tHyI%3d&risl=&pid=ImgRaw&r=0) center; background-size: cover; position: fixed; z-index: -9999999999; } <div class="module-jamf" id="module-jamf"> <a class="jamf-container" id="jamf-container" target="_blank" rel="noopener"> <center> <p class="hover-text">TITLE1</p> <img id="new" class="manImg" src=""> <div class="jamf-mover" id="jamf-mover"> </div> </a> </div> <div class="module-jamf" id="module-jamf"> <a class="jamf-container" id="jamf-container" target="_blank" rel="noopener"> <center> <p class="hover-text">TITLE2</p> <img id="new" class="manImg2" src=""> <div class="jamf-mover" id="jamf-mover"> </div> </a> </div>Quiero que estas imágenes se muestren al pasar el cursor sobre el título, además de eso, cuando paso el cursor por el título y muevo el cursor, quiero que la imagen siga al cursor. Soy nuevo en JavaScript, cualquier ayuda de ustedes sería muy apreciada.
Le sugiero que se vincule al evento mousemove en el documento y luego lo use para rastrear la posición x e y del mouse, luego traduzca ese valor a la posición de fondo de dichas imágenes, simplemente agregue el javascript a continuación a su página (al final de la documento en la etiqueta del script después de la importación de la biblioteca jquery js)
Estoy usando la última versión de jQuery
$(document).on('mousemove', (e)=>{ let el = $('.manImg'); el.css({"background-position": (el.width() + e.offsetX) + "px " + (el.height() + e.offsetY) + "px"}); let el2 = $('.manImg2'); el2.css({"background-position": (el2.width() + e.offsetX) + "px " + (el2.height() + e.offsetY) + "px"}); });Aquí hay un ejemplo jsFiddle
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>