0
105
VistasEnviar evento de mouseover a todos los elementos superpuestos
¿Alguien sabe cómo propagar/activar el evento mouseover a varios niños cuando aparecen superpuestos uno encima del otro? ¿Es posible?
Estoy tratando de activar el mouseover para 2 elementos superpuestos. He escrito un ejemplo básico para demostrar el problema:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> body { background-color: black; } .relative { position: relative; } .child-1, .child-2 { position: absolute; width: 200px; height: 200px; } .child-1 { top: 0; left: 0; background-color: rgba(255, 255, 0, 0.5); } .child-2 { top: 50px; left: 50px; background-color: rgba(0, 255, 255, 0.5); } </style> <body class="relative"> <div class="child-1">1</div> <div class="child-2">2</div> </body> <script> const child1 = document.querySelector('.child-1'); const child2 = document.querySelector('.child-2'); child1.addEventListener('mousemove', () => console.log(1)); child2.addEventListener('mousemove', () => console.log(2)); </script> </html> Cada vez que paso el mouse sobre el niño 1, obtengo un registro de 1 . Cuando paso el mouse sobre solo el niño 2, obtengo un registro de 2 . Todo eso funciona. Pero cuando paso el cursor sobre 1 y 2 donde se superponen, solo obtengo un registro de cuál está en la parte superior, en este caso 2 (esto se puede voltear ajustando el z-index o el orden en el DOM).
Encontré esta respuesta , pero cambiando el z-index o pointer-events: none no me ayuda porque necesito que se active el evento de ambos elementos.