I have 2 containers, one on top of the other, being controlled by zIndex whether event is mouseover/mouseout;

There is an issue with event bubbling whereby the child element fires off the parent event. I could change the event to mouseleave from mouseout which resolves the issue but how would I go about then changing the zIndex of the target element?

giphyContainer.addEventListener('mouseover', (e) => {

    let backPanel = e.target.parentElement.querySelector('.giphyImg__Back');
    let frontPanel = e.target.parentElement.querySelector('.giphyImg__Front');
    let target = e.target;
    
    if (target.className === "giphyImg__Front") {
        frontPanel.style.zIndex = "-3";
        backPanel.style.zIndex = "3";
    }
});

giphyContainer.addEventListener('mouseleave', (e) => {

    // Previously worked with event of mouseout
    // let backPanel = e.target.parentElement.querySelector('.giphyImg__Back');
    // let frontPanel = e.target.parentElement.querySelector('.giphyImg__Front');

    // console.log(backPanel);
    // e.target - event that troggered the event
    // e.currentTarget - the event listener element

    console.log(e);
    let backPanel2 = e.target.firstChild.lastElementChild;
    let frontPanel2 = e.target.firstChild.firstElementChild;
    console.log(backPanel2);
    console.log(frontPanel2);

    if (backPanel2.className === "giphyImg__Back") {
        frontPanel2.style.zIndex = 3;
        backPanel2.style.zIndex = -3;
    }
});