Tengo 2 contenedores, uno encima del otro, controlados por zIndex si el evento es mouseover/mouseout;

Hay un problema con el burbujeo de eventos por el cual el elemento secundario activa el evento principal. Podría cambiar el evento a mouseleave desde mouseout, lo que resuelve el problema, pero ¿cómo haría para cambiar el zIndex del elemento de destino?

 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; } });