add EventListener to element under element

February 16, 2022

I have two images on top of each other.

I would like to add a mouseenter and mouseleave EventListener to the image on the bottom and I would like for the EventListeners to completely ignore the image on top.

How can I do this?

This is my code: (Fiddle here: 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">

As you can see, there are two images on top of each other. – The bottom image has EventListeners for mouseenter and mouseleave and I need these EventListeners to only look at the edges of the bottom-image and ignore the top-image.

I guess I could just create an empty div that has exactly the same size and position as the bottom image and then position that div over everything and add the EventListeners to the empty div. – But I’m hoping that there’s a more elegant solution? 😉

>Solution :

Just add CSS pointer-events:none to your imageTop

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">