Событие "onmouseover" перестает работать при наведении в дочернем элементе на текст. Как пофиксить?

Есть событие mouseover, объявленное при помощи addEventListener(). После наведения мыши на нужный объект встраивается дополнительная разметка дочерним элементом в тот же объект. Однако при наведении на эти только что созданныЕ дочерние элементы(картинка и текст) событие перестает работать. Как это исправить? Там, где появляется новая разметка оставил однострочный комментарий в 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 = "";
    });
});