рони,

<a href="#" class="works__row-image">
        <div class="works__hover">
            <div class="works__hover-text"></div>
            <div class="works__hover-text"></div>
        </div>
        <img src="../src/IMG/worksImages/image_1.jpg" class="works__image">
    </a>

.works__row-image {
display: block;
    transition: 0.3s;
    position: relative;
    margin: 15px;
}
.works__hover {
 transition: 0.3s;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color_8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

и вот как делал я

const children = document.querySelector(".works__hover")
    children.addEventListener("click", () => {
      children.parentNode.classList.toggle("active")
    });

По картинке видно что класс добовляется works__hover, а мне нужно на works__row-image ,когда я кликаю по элементу works__hover

Alexander3928,

document.addEventListener("DOMContentLoaded", function() {
            const parent = document.querySelector(".works__row-image")
            parent.addEventListener("click", function(event) {
                event.preventDefault();
                if (event.target.closest(".works__hover")) parent.classList.add("active");
            });
        });