Tengo dos imágenes una encima de la otra.
Me gustaría agregar un mouseenter y mouseleave a la imagen en la parte inferior y me gustaría que los EventListeners ignoren por completo la imagen en la parte superior.
¿Cómo puedo hacer esto?
Este es mi código: (Violín aquí: https://jsfiddle.net/tLyk6pxu/ )
document.querySelector(".testImageBottom").addEventListener('mouseenter', () => { console.log("trigger: mouseenter"); }); document.querySelector(".testImageBottom").addEventListener('mouseleave', () => { console.log("trigger: mouseleave"); }); img { position: absolute; } .testImageBottom { width: 400px; } .testImageTop { width: 200px; opacity: .5; } <img class="testImageBottom" src="https://images.unsplash.com/photo-1527549993586-dff825b37782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="test"> <img class="testImageTop" src="https://images.unsplash.com/photo-1472396961693-142e6e269027?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=952&q=80" alt="test"> Como puede ver, hay dos imágenes una encima de la otra. – La imagen inferior tiene EventListeners para mouseenter y mouseleave y necesito estos EventListeners para mirar solo los bordes de la imagen inferior e ignorar la imagen superior.
Supongo que podría crear un div vacío que tenga exactamente el mismo tamaño y posición que la imagen inferior y luego colocar ese div sobre todo y agregar EventListeners al div vacío. – ¿Pero espero que haya una solución más elegante? ;)
Simplemente agregue CSS pointer-events:none a su imagenArriba
document.querySelector(".testImageBottom").addEventListener('mouseenter', () => { console.log("trigger: mouseenter"); }); document.querySelector(".testImageBottom").addEventListener('mouseleave', () => { console.log("trigger: mouseleave"); }); img { position: absolute; } .testImageBottom { width: 400px; } .testImageTop { width: 200px; opacity: .5; pointer-events:none; } <img class="testImageBottom" src="https://images.unsplash.com/photo-1527549993586-dff825b37782?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="test"> <img class="testImageTop" src="https://images.unsplash.com/photo-1472396961693-142e6e269027?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=952&q=80" alt="test">