将鼠标悬停在子元素中的文本上时，“onmouseover”事件停止工作。怎么修？

有一个用 addEventListener() 声明的 mouseover 事件。将鼠标悬停在所需对象上后，附加标记将作为子元素嵌入到同一对象中。但是，当将鼠标悬停在这些新创建的子元素（图像和文本）上时，事件将停止工作。如何解决？在新标记出现的地方，我在 JS 代码中留下了单行注释。

    <section class="about-us">
        <div class="container">
            <div class="title">What we do</div>
            <div class="subtitle">Story about us</div>
            <div class="divider"></div>
            <div class="desciption">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
            <div class="about-us__wrapper-images">
                <div class="about-us__wrapper-for-hover">
                    <div class="about-us__wrapper-bgImage">
                        <img src="icons/about-us_block/USERS.png" alt="users picture" alt="" class="about-us__hover-image-team">
                        <div class="about-us__hover-text">super team</div>
                        <!-- background image -->
                    </div>
                </div>
                <div class="about-us__wrapper-for-hover">
                    <div class="about-us__wrapper-bgImage">
                        <!-- background image -->
                    </div>
                </div>
                <div class="about-us__wrapper-for-hover">
                    <div class="about-us__wrapper-bgImage">
                        <!-- background image -->
                    </div>
                </div>
            </div>
        </div>
    </section>

const wrapperImages = document.querySelectorAll(".about-us__wrapper-for-hover"),
      imgAtPage = document.querySelectorAll(".about-us__wrapper-bgImage"),
      obfUrlImages = [`url("img/about-us/1.jpg")`, 
                      `url("img/about-us/2.jpg")`,
                      `url("img/about-us/3.jpg")`
                     ];
 
imgAtPage.forEach( (img, i) => {
    img.style.cssText += `
        background-image: ${obfUrlImages[i]};
    `;
});
 
wrapperImages.forEach( (wrapperImgs, i) => {
    wrapperImgs.addEventListener("mouseover", () => {
        wrapperImgs.style.cssText = `
            background-color: #95e1d3;
        `;
 
        const wrapperImg = wrapperImgs.querySelector(".about-us__wrapper-bgImage");
        wrapperImg.style.cssText += `
            transform: translate(-10px, -10px);
            background-image: linear-gradient(to top, rgba(252, 227, 138, 0.9) 0%, rgba(243, 129, 129, 0.9) 100%),
                                ${obfUrlImages[i]};
        `;
        wrapperImg.innerHTML = ` //эти картинка и текст после появления мешают работе события
        <img src="icons/about-us_block/USERS.png" alt="users picture" alt="happy users picture" class="about-us__hover-image-team">
            <div class="about-us__hover-text">super team</div>
        `;
    });
    wrapperImgs.addEventListener("mouseout", () => {
        wrapperImgs.style.cssText = ``;
 
        const wrapperImg = wrapperImgs.querySelector(".about-us__wrapper-bgImage");
        wrapperImg.style.removeProperty("transform");
        wrapperImg.style.cssText += `
            background-image: ${obfUrlImages[i]};
        `;
        wrapperImg.innerHTML = "";
    });
});