Cuando agrego el evento mousemove, lo obtengo en toda mi página. Lo quiero dentro de mi div solamente. cuando mi cursor deja el div, no debería mostrar el efecto que he agregado. Por favor ayúdame a solucionar esto. gracias
Captura de pantalla para aclaración
Imagen hexagonal - si quieres probar
Aquí está mi código (HTML, CSS y JS incluidos)
const BG = document.querySelector(".bg"); document.querySelector(".container").addEventListener("mousemove", function(e) { BG.style.left = e.clientX + "px"; BG.style.top = e.clientY + "px"; }); .container { height: 800px; width: 100%; background-color: #000; position: relative; } .hex { background: url("images/Hexagon.svg") repeat; height: 800px; width: 100%; position: absolute; background-size: 500px; z-index: 1; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 300px; width: 300px; background: linear-gradient(90deg, #335bfa 0%, #2ae9c9 100%); filter: blur(20px); z-index: 0; overflow: none; } <body> <div class="container"> <div class="hex"></div> <div class="bg"></div> </div> <script src="index.js"></script> </body>Agregar overflow: hidden; a su .contenedor
Coloque overflow: hidden en .container .
const BG = document.querySelector(".bg"); document.querySelector(".container").addEventListener("mousemove", function(e) { BG.style.left = e.clientX + "px"; BG.style.top = e.clientY + "px"; }); .container { height: 800px; width: 100%; background-color: #000; position: relative; overflow: hidden; } .hex { background: url("images/Hexagon.svg") repeat; height: 800px; width: 100%; position: absolute; background-size: 500px; z-index: 1; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 300px; width: 300px; background: linear-gradient(90deg, #335bfa 0%, #2ae9c9 100%); filter: blur(20px); z-index: 0; overflow: none; } <body> <div class="container"> <div class="hex"></div> <div class="bg"></div> </div> <script src="index.js"></script> </body>Puede usar pointer-events: none; en su elemento .bg como se muestra en esta demostración. Esa es la razón por la que su código no funcionaba como se esperaba, porque el elemento .bg dentro del div.container estaba transmitiendo el evento al padre. La forma más rápida de evitarlo es evitar que ese elemento capture el evento.
const BG = document.querySelector(".bg"); document.querySelector(".container").addEventListener("mousemove", function(e) { BG.style.left = e.clientX + "px"; BG.style.top = e.clientY + "px"; }); .container { height: 800px; width: 100%; background-color: #000; position: relative; } .hex { background: url("images/Hexagon.svg") repeat; height: 800px; width: 100%; position: absolute; background-size: 500px; z-index: 1; } .bg { pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 300px; width: 300px; background: linear-gradient(90deg, #335bfa 0%, #2ae9c9 100%); filter: blur(20px); z-index: 0; overflow: none; } <body> <div class="container"> <div class="hex"></div> <div class="bg"></div> </div> <script src="index.js"></script> </body>